javascript - 使用 localStorage 编辑一组对象

Question

不确定从哪里开始...我正在使用 localStorage 创建一个基本的待办事项应用程序。 (特别是，我没有使用后端数据库)。

到目前为止，我可以更新和显示我在本地存储的对象。我正在我的页面上显示它们。

form.addEventListener('submit', function(e){
    e.preventDefault();

    // Set object
    let data = {
      name: nameInput.value,
      url: urlInput.value
    };
    bookMarksArray.push(data);
    console.log("Added bookmark #" + data);

    // Saving
    localStorage.setItem("bookMarksArray", JSON.stringify(bookMarksArray));
});

但是，我还希望能够编辑 我的 DOM 中的每个项目。编辑后，我希望与此相关的特定对象在 localStorage 中更新。

我该怎么做？

我不确定从哪里开始。到目前为止，这是我的代码的代码笔: https://codepen.io/ReenaVerma1981/pen/LYEPbjL

EG - 如果我想将 URL 值更新为 www.google.co.uk - 这在 localStorage 中的正确对象中进行了更新

这是一些伪代码，这是一个好方法吗？

// List each object as an individual form in DOM
// So I can easily update the input.value, (with a new value)
// The **edit** button, would be a submit button
// Or there's an eventHandler on this button
// Which onClick, takes the input.value, (either name.value or url.value)
// Identifies whether these values, match values in the localStorage object
// And if so, get the object index
// Then update these object values, based on the object index?
// Update localStorage via localStorage.setItem

这是我正在编写的一些示例代码，用于尝试执行此操作:

    // UPDATE/EDIT EXISTING
const list = document.querySelector('.url-list');
list.addEventListener('click', event => {

  if (event.target.classList.contains('js-edit-url')) {
    console.log('edit');
    const editName = event.target.parentElement.name.value;
    const editURL = event.target.parentElement.url.value;

    let data = {
      name: editName,
      url: editURL
    };

    Object.keys(bookMarksArray).map(function (old_key, index) {
      // console.log('old_key',old_key);
      let new_key = data;
      console.log('data', data);
      if (old_key !== new_key) {
        Object.defineProperty(bookMarksArray, new_key,
          Object.getOwnPropertyDescriptor(bookMarksArray, old_key));
          // console.log('bookMarksArray',bookMarksArray);
          // localStorage.setItem("bookMarksArray", JSON.stringify(bookMarksArray));
        delete bookMarksArray[old_key];
      }
    });
  }
});

Answer 1

我想通了!

我找到了一个 really good example here ，使用 ES6 方式，不改变原始数据:

// UPDATE/EDIT EXISTING
const list = document.querySelector('.url-list');
list.addEventListener('click', event => {

  if (event.target.classList.contains('js-edit-url')) {
    console.log('edit');
    const editName = event.target.parentElement.name.value;
    const editURL = event.target.parentElement.url.value;

    // Find the object index, by looping through and matching name.value
    const objIndex = bookMarksArray.findIndex(obj => obj.name === editName);

    // make new object of updated object.   
    const updatedObj = { ...bookMarksArray[objIndex], url: editURL};

    // make final new array of objects by combining updated object.
    const updatedProjects = [
      ...bookMarksArray.slice(0, objIndex),
      updatedObj,
      ...bookMarksArray.slice(objIndex + 1),
    ];


    localStorage.setItem("bookMarksArray", JSON.stringify(updatedProjects));
  }
});