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中更新。

我该怎么做呢？

我不知道从哪里开始。这是迄今为止我的代码的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];
      }
    });
  }
});

标签： javascriptarraysobjectlocal-storagejavascript-objects

Answer 1

我想到了！

我在这里找到了一个非常好的示例，使用 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));
  }
});