javascript - 使用localStorage编辑一组对象(Edit a set of objects using localStorage)

Question

Not sure where to start with this one... I'm creating a basic todo app, using localStorage.

(不确定从何处开始...我正在使用localStorage创建一个基本的待办事项应用程序。)

(I specially, am not using a backend database).

(（我特别不使用后端数据库）。)

So far, I can update and display, the objects I have stored locally.

(到目前为止，我可以更新和显示本地存储的对象。)

And I am displaying them on my page.

(我正在页面上显示它们。)

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));
});

However, I also want to able to edit , each item in my DOM.

(但是，我也希望能够编辑 DOM中的每个项目。)

Once edited, I want that specific object, which correlates to this, to be updated in localStorage .

(编辑后，我希望与此特定对象相关联，并在localStorage中对其进行更新。)

How do I do this?

(我该怎么做呢？)

I'm not sure where to start.

(我不确定从哪里开始。)

Here's a codepen, of my code so far: https://codepen.io/ReenaVerma1981/pen/LYEPbjL

(这是到目前为止我的代码的一个codepen： https ://codepen.io/ReenaVerma1981/pen/LYEPbjL)

EG - if I want to update a URL value to www.google.co.uk - And this is updated, in the correct object, in localStorage

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

Here's some psuedo code, is this a good approach?

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

// 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

Here's some example code, I'm writing, to try and do this:

(这是我正在写的一些示例代码，尝试执行此操作：)

    // 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];
      }
    });
  }
});

  ask by Reena Verma translate from so

Answer 1

I figured it out!

(我想到了！)

I found a really good example here , using the ES6 way, without mutating original data:

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