локальное хранилище с избыточностью не работает должным образом - PullRequest
Новая
       33

локальное хранилище с избыточностью не работает должным образом

0 голосов
/ 06 апреля 2020

Я новичок в JavaScript и работаю над тестовым приложением E-commerse с React и Redux, где мне нужно сохранить данные в корзине (для этого я использую локальное хранилище). Когда я добавляю товары в корзину, они сохраняются в локальном хранилище, когда я обновляю sh, данные страницы все еще сохраняются в локальном хранилище. Проблема возникает, когда я пытаюсь добавить другие элементы в корзину после обновления страницы sh, вместо добавления к элементам, которые были там изначально, он начинает добавлять с нуля.

вот фрагмент кода для этого:

МОЙ РЕДЮКС ДЕЙСТВИЯ 

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 Извините за мой плохой английский sh

1 Ответ

1 голос
/ 06 апреля 2020

Похоже, 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 },
  };
};
...