使用 localStorage 编辑一组对象答案

【问题标题】：Edit a set of objects using localStorage使用 localStorage 编辑一组对象
【发布时间】：2020-03-25 10:43:57
【问题描述】：

不知道从哪里开始...我正在使用 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 中更新与此相关的特定对象。

我该怎么做？

我不知道从哪里开始。到目前为止，这是我的代码的codepen： 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];
      }
    });
  }
});

【问题讨论】：

你能缩小你的问题范围吗？您在执行最后三个步骤中的哪一个时遇到了困难？
@Cristy - 基本上，我想知道如何编辑本地存储中的每个项目。但我不知道该怎么做……伪代码只是一个例子，我不确定如何处理这个问题。
@ReenaVerma 你必须localStorage.getItem()，对其进行变异，然后再次localStorage.setItem()
@symlink - 谢谢你，但我不确定如何解决这个问题。我添加了一些伪代码。
符号链接在用编辑后的用户输入替换 mutate it 时说的差不多...有什么不清楚的地方？

标签： javascript arrays object local-storage javascript-objects

【解决方案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));
  }
});

【讨论】：