Javascript 如何从本地存储更新阵列

加载页面时，我正在我的Li项目中进行id更新 但这在我的本地存储阵列中不会发生 例如，我可以有这样的东西：

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

]

然后我删除了一个李

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

我想更新这个数组对象，改为与我现有的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));
    });
}

const listaTweets=document.getElementById（'lista-tweets'）；
让李,；
让评论；
听众（）；
函数evenListeners（）{
document.querySelector（“#formulario”）.addEventListener（'submit'，addTweet）；
listaTweets.addEventListener（'click'，deleteComment）；
document.addEventListener（'DOMContentLoaded'，localStorageDone）
}
函数addTweet（e）{
e、 预防默认值（）；
comment=document.getElementById（'tweet'）.value；
如果（评论）{
createLi（评论）；
addCommentLocalStorage（注释）
}
}
函数createLi（注释）{
constDeleteButton=document.createElement（'a'）；
deleteButton.classList='删除注释'；
deleteButton.innerText='x'；
li=document.createElement（'li'）；
li.innerText=注释；
li.appendChild（删除按钮）；
依附儿童（li）；
如果（李）{
for（设i=0；i

您似乎没有在deleteCommentLocalStorage函数中执行任何操作来更新索引。请尝试类似的操作

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

或

---

非常感谢你的帮助。它现在运行得很好

[
     {
      "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));
    });
}

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