带有 redux 的本地存储无法按预期工作

Question

我是 JavaScript 的初学者，我正在使用 React 和 Redux 开发电子商务测试应用程序，我需要在购物车上保存数据（为此我使用本地存储）。当我将商品添加到购物车时，它们存储在本地存储中，当我刷新页面时，数据仍保留在本地存储中。当我在页面刷新后尝试将其他项目添加到购物车时出现问题，而不是添加到最初存在的项目中，它从零开始添加。这是一个代码片段：我的 REDUX 行动const arr = [];export const addItem = (itemsAddedToCart) => {  const id = Math.random();  arr.push({ ...itemsAddedToCart, id: id });  const test = JSON.stringify(arr);  localStorage.setItem("test", test);  return {    type: "ADD_ITEM",    payload: { ...itemsAddedToCart, id: id },  };};PS对不起我的英语不好

Answer 1

看起来localStorage.setItem()会覆盖本地存储中已有的内容。

要在不删除旧条目的情况下更新本地存储中的内容，您可以先读取本地存储内容，合并新项目并写入存储。

const arr = [];

export const addItem = (itemsAddedToCart) => {

  const id = Math.random();

  arr.push({ ...itemsAddedToCart, id: id });

  //get the new elements' ids to a set

  const ids = new Set(arr.map(d => d.id));

  //read stored items from storage and join them to arr

  const storedItems = localStorage.getItem("test");

  if(storedItems) {

    const storedItemsParsed = JSON.parse(storedItems);

    // if the item is not in new items, add them to arr

    arr = [..arr, ...storedItemsParsed.filter(item=> !ids.has(item.id)) ]

  }

  const test = JSON.stringify(arr);

  localStorage.setItem("test", test);

  return {

    type: "ADD_ITEM",

    payload: { ...itemsAddedToCart, id: id },

  };

};