无法删除 localStorage 数组项

Posted 2023-02-22

【中文标题】无法删除 localStorage 数组项

【英文标题】：Unable to delete localStorage array item

【发布时间】：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。

【参考方案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 不是一个函数”