javascript - 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 },
  };
};

附注抱歉我的英语不好

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 },
  };
};