无法删除 localStorage 数组项答案

【问题标题】：Unable to delete localStorage array item无法删除 localStorage 数组项
【发布时间】：2021-06-13 14:30:36
【问题描述】：

我正在尝试从保存在 localStroage 中的购物车中删除单个购物车项目，到目前为止，我只能通过 removeitem() 或 clear() 删除整个数组，但我想按项目 ID 删除选择性项目.同时，如果我使用拼接，我会遇到错误。我正在学习，如果我需要提供更多信息，请告诉我。

deleteProduct: (index) => {
            const existingEntries = JSON.parse(localStorage.getItem("cartData"));
            existingEntries.splice(index, 1);
            localStorage.setItem("cartData", JSON.stringify(existingEntries));
        }

let cartData = window.localStorage.getItem('cartData');

const cart = {
    state: {
        cartData: cartData ? JSON.parse(cartData) : {
            foods: [],
            totalPrice: [],
            Quantities: []
        },
    },

【问题讨论】：

你可能想在使用拼接之前检查existingEntries是否是一个数组。
我通过 console.log(existingEntries) 检查，它确实是一个数组。您能否提供一个示例代码，展示如何使用 id 从 localStroage 数组中删除项目。
你能在localstorage中显示cartData吗
我已添加购物车数据信息，请查看
它不是一个数组（或字符串），所以它没有拼接方法。如果这是真实代码，您还需要检查该值是否已设置，用户可以随时删除 localStorage。

标签： javascript vue.js local-storage vuex

【解决方案1】：

你可以试试

const cartData = JSON.parse(localStorage.getItem("cartData"))
if(cartData && cartData.foods) {
    const existingEntries = cartData.foods;
    existingEntries.splice(index, 1);
    localStorage.setItem("cartData", JSON.stringify(existingEntries))
}

您还可以在setItem 之前更新totalPrice 和Quantities

【讨论】：

我也尝试了您的解决方案并且它有效。感谢您的帮助
旁注：如果localStorage.getItem('cartData') 返回未定义，这可能会导致Uncaught TypeError，更好的单独步骤并添加验证

【解决方案2】：

注意事项：

cartData 是一个String，它在localStorage，所以它必须是一个String。
解析它，它是一个Object
cartData.foods 是这里的数组

代码步骤：

从localStorage 获取cartData
解析它，你会得到一个JSON Object，其中有一个密钥.food
访问密钥cartData.foods
拼接

【讨论】：

您的代码步骤 3 成功了，我没有使用 .foods 来引用密钥。谢谢

【解决方案3】：

得到数组后尝试解析它

deleteProduct: (index) => {
        var localStorageArray =  localStorage.getItem("cartData")
        const existingEntries = JSON.parse(localStorageArray);
        existingEntries.splice(index, 1);
        localStorage.setItem("cartData", JSON.stringify(existingEntries));
    }

【讨论】：

我按照你说的做了尝试，但我得到了和以前一样的错误，“existingEntries.splice 不是一个函数”