时间戳

首页 > 解决方案 > 带有 redux 的本地存储无法按预期工作

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

问题描述

我是 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对不起我的英语不好

标签： javascriptreactjsreduxlocal-storage

解决方案

看起来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 },
  };
};

推荐阅读