反应添加数组到localStorage

Question

我正在React中制作一个出现日历，并使用localStorage，以便当用户第二天返回时打开的门保持打开状态。

我能够写入和读取localStorage，但是第一次用户单击门时，它没有添加，而是将它添加到了openArr数组中，但没有添加到localStorage中，我确定我缺少一些简单的东西，但看不到它！这是我的代码。

  const localData = localStorage.getItem("openDoors");
  const [openedArr, setOpenedArr] = useState(localData ? localData : []);
  const openDoor = e => {
    e.currentTarget.parentElement.classList.add("opened");
    setOpenedArr([...openedArr, e.currentTarget.id]);
    localStorage.setItem("openDoors", openedArr);
  };

Answer 1

您设置的值与您添加到本地存储的值不同。

尝试这样的事情：

const openDoor = e => {
    e.currentTarget.parentElement.classList.add("opened");
    const newValue = [...openedArr, e.currentTarget.id];
    setOpenedArr(newValue);
    localStorage.setItem("openDoors", JSON.stringify(newValue));
  };