Vue3中使用原生JS删除LocalStorage数组元素更新失败求助

问题场景 #

在Vue3组件中使用原生JavaScript尝试删除LocalStorage中存储的数组元素，存储的数组如下：

["96", "281", "287", "415", "650", "661", "378", "295"]

点击删除按钮时，最初编写的removeItem函数无法正确删除数组元素并更新LocalStorage。

原错误代码 #

const removeItem = (event) => {
        let itemId = event.target.parentElement.parentElement.children[0].id;
        console.log(itemId)

        // save ids in LocalStorage to in next steps send to controller
        // first delete all content from LocalStorage
        const existingEntries = JSON.parse(localStorage.getItem("items_ids"));
        existingEntries.splice(itemId, 1);
        localStorage.setItem("items_ids", JSON.stringify(existingEntries))

        addItemCart.value = addItemCart.value.filter(item => item.id != itemId);
    }

错误原因 #

• splice方法的第一个参数需要传入数组索引值，但这里的itemId是字符串类型的元素值（如"96"），并非数组的索引位置，导致无法定位到要删除的元素，删除操作无效。
• 先修改LocalStorage再更新组件数据，容易出现组件数据与LocalStorage数据不一致的情况。

修复后的有效代码 #

const removeItem = (event) => {
        let itemId = event.target.parentElement.parentElement.children[0].id;

        // save ids in LocalStorage to in next steps send to controller
        // first delete all content from LocalStorage
        addItemCart.value = addItemCart.value.filter((item) => item.id !== itemId);
        let newArrayIds = []
        addItemCart.value.forEach(element => {
            newArrayIds.push(element.id)
        });
        localStorage.setItem("items_ids", JSON.stringify(newArrayIds));
    }

修复思路 #

1. 优先更新组件内的响应式数据addItemCart：通过filter方法过滤掉id匹配的项，确保组件视图能正确更新。
2. 基于更新后的组件数据重新生成id数组：遍历addItemCart提取所有元素的id，得到最新的id数组。
3. 将新的id数组存入LocalStorage：保证LocalStorage的数据与组件内数据完全一致，避免索引操作带来的错误。

内容的提问来源于stack exchange，提问作者scorpions77