如何删除localStorage储存数组中的指定对象

Question

我在使用Vue.js做一个评论列表的demo的时候，将输入框输入的用户名和评论内容存储在localStorage中并通过列表展示，我想通过点击实现删除对应的评论，同时更新localStorage中的数据。

这是子组件中存储数组的方法：

postComment(){
            
    var comment = {id:Math.random(),user:this.user, content:this.content};

    // 从localStorage中获取所有的评论
    var list = JSON.parse(localStorage.getItem('cmts')||'[]');
    list.unshift(comment)
    // 保存最新的评论数据
    localStorage.setItem('cmts',JSON.stringify(list))
    this.user = this.content = ''

    this.$emit('func')
}

删除评论的方法：

del(id){
        this.list.some((item,i)=>{
            var list = JSON.parse(localStorage.getItem('cmts')||'[]');
            if(item.id === id){
                this.list.splice(i,1);
                return true;
            }
             // 将删除对应数据后新的评论列表存到list中
        localStorage.removeItem('cmts',JSON.stringify(list));
    })
            }

这是存储在localStorage中的数组：

使用removeItem()会把整个list数组给删除了：

 localStorage.removeItem('cmts',JSON.stringify(list));

尝试过在使用some方法删除评论后，重新将list数组存储到localStorage当中去，但list数组没更新。
我想知道怎么通过id值删除localStorage中存储的list数组的对应对象。

Answer 1

把数组对应项删除后，再储存新的数组即可：

del(id){
    this.list.splice(this.list.findIndex(item => item.id === id), 1);
    localStorage.setItem('cmts',JSON.stringify(this.list))
}

Answer 2

只要给localStorage中指定的键名重新复制就行了。

Answer 3

问题解决了，我把重新保存新数据的操作放到了this.list.some()的内部了，这就会导致获取dom的ID跟localStorage中的数组对象ID不一致和错位。将下面这行写在this.list.some()外部即可解决。

                    localStorage.setItem('cmts',JSON.stringify(this.list));