无法删除 localStorage 数组项

Question

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

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: []
        },
    },

Answer 1

拿到数组后尝试解析你的数组

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

Answer 2

备注：

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

代码步骤：

从 localStorage

cartData

解析它，你得到一个 JSON Object 有一个键 .food
访问密钥，cartData.foods
拼接起来

Answer 3

你能试试吗

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 数组项

Unable to delete localStorage array item

javascript

local-storage

vue.js

vuex