如何从本地存储更新数组

Question

加载页面时，我正在我的 Li 项目中进行 id 更新，但这在我的本地存储数组中没有发生，例如我可以有这样的事情：

<li id=0>text1</li>
<li id=1>text2</li>
<li id=2>text3</li>

在我的本地存储中，我有相同的项目

[
 {
  "id":0,
  "com":"text1"
},
{
   "id":1,
  "com":"text2"
},
{
 "id":2,
 "com" : "text3"
}

]

然后我删除了一个li

    <li id=0>text1</li>
    // deleted item <li id=1>text2</li>
    <li id=2>text3</li>

然后我给页面充值，id的li就这样更新了

<li id=0>text1</li>
<li id=1>text3</li>

但是在我的页面加载后，我的 localstorage 数组保持这样的数组

 [
     {
      "id":0,
      "com":"text1"
    },
    {
     "id":2,
     "com" : "text3"
    }
]

我想更新这个数组 object 来匹配我现有的 li

[
     {
      "id":0,
      "com":"text1"
    },
    {
       "id":1,
      "com":"text3"
    },
]

谢谢你的帮助。 我有两个星期的时间来解决它:(

这是我的代码，如果有帮助

const listaTweets = document.getElementById('lista-tweets');
let li;
let comment;

evenListeners();

function evenListeners() {
    document.querySelector('#formulario').addEventListener('submit', addTweet);
    listaTweets.addEventListener('click', deleteComment);
    document.addEventListener('DOMContentLoaded', localStorageDone)
}


function addTweet(e) {
    e.preventDefault();
    comment = document.getElementById('tweet').value;

    if(comment) {
        createLi(comment);
        addCommentLocalStorage(comment)
    }
}

function createLi(comment) {
    const deleteButton = document.createElement('a');
    deleteButton.classList = 'delete-comment';
    deleteButton.innerText = 'x';

    li = document.createElement('li');
    li.innerText = comment;
    li.appendChild(deleteButton);

    listaTweets.appendChild(li);

    if(li) {
        for (let i = 0; i < listaTweets.children.length; i++) {
            li.setAttribute('id', + i)
        }
    }
}

function deleteComment(e) {
    e.preventDefault();
    li = e.target.parentElement;
    if(e.target.className === 'delete-comment') {
        li.remove();
        deleteCommentLocalStorage()
    }
}

function addCommentLocalStorage(comment) {
    let arrayComments;
    let id;
    arrayComments = getFromLocalStorage();

    arrayComments.length === 0 ? id = 0 : id = (arrayComments[arrayComments.length - 1].id) + 1

    
    let object = {
        id: id,
        com: comment
    }

    arrayComments.push(object)
    localStorage.setItem('comments', JSON.stringify(arrayComments))
}


function getFromLocalStorage() {
    let arrayComments;
    if(localStorage.getItem('comments') === null) {
        arrayComments = []
    } else {
        arrayComments = JSON.parse(localStorage.getItem('comments'))
    }
    
    return arrayComments
}

function localStorageDone() {
    let arrayComments;
    arrayComments = getFromLocalStorage();
    
    arrayComments.forEach(function(comment){
        createLi(comment.com)
    })
}

function deleteCommentLocalStorage() {
    let arrayComments = getFromLocalStorage();
    
    arrayComments.forEach( function(element) {
        if (element.id == li.id) {
            let i = arrayComments.indexOf(element);
            arrayComments.splice(i, 1);
        }
        
        localStorage.setItem('comments', JSON.stringify(arrayComments));
    });
}

Answer 1

你似乎没有在你的 deleteCommentLocalStorage function 中做任何事情来更新索引。 也许尝试这样的事情。

function deleteCommentLocalStorage() {
    let arrayComments = getFromLocalStorage();
    let i = arrayComments.findIndex(el => el.id == li.id);
    arrayComments.splice(i, 1);
    arrayComments = arrayComments.map((el, id) => ({...el, id});
        
    localStorage.setItem('comments', JSON.stringify(arrayComments));
}

或者

function deleteCommentLocalStorage() {
    let arrayComments = getFromLocalStorage();
    arrayComments = arrayComments
      .filter(el => el.id != li.id)
      .map((el, id) => ({ ...el, id }));

    localStorage.setItem('comments', JSON.stringify(arrayComments);
}