刷新清除本地存储时做出反应答案

【问题标题】：react when refresh clear local storage刷新清除本地存储时做出反应
【发布时间】：2021-08-04 07:33:17
【问题描述】：

我正在尝试将数据存储在本地存储中，但每次网页刷新时数据都会被清除。

const accounts = () => {
  let list = localStorage.getItem("Account List");
  if (list) {
    return JSON.parse(list);
  } else {
    return [];
  }
};

const AppProvider = ({ children }) => {
  const [account, setAccount] = useState(accounts());

  const [accountList, setAccountList] = useState([]);
  const addAccount = (id) => {
    if (accountList.find((data) => data === id)) {
      setAccountList([...accountList]);
    } else {
      setAccountList([...accountList, id]);
    }
  };

 useEffect(() => {
    localStorage.setItem("Account List", JSON.stringify(accountList));
  }, [accountList];

...

}

代码按预期工作，但我没想到数据会被删除。代码有问题吗？感谢任何形式的回应。

编辑：我使用了错误的状态，我应该使用accountList 状态而不是account

 const [account, setAccount] = useState("");
 const [accountList, setAccountList] = useState(accounts());

【问题讨论】：

是删除localstorage键还是清除值？
为什么在这里使用空数组：const [accountList, setAccountList] = useState([]);？不应该是const [accountList, setAccountList] = useState(accounts()); 吗？ const [account, setAccount] = useState(accounts()); 的目的是什么？你似乎没有在任何地方使用account/setAccount。
页面刷新时，accountList被赋值为[]的初始值，useEffect用空数组设置“账户列表”
"代码按预期运行，但我没想到数据会被删除。"那么...代码没有按预期工作？您尝试将哪个状态持久保存到 localStorage，以及您想从 localStorage 中“补充”哪些状态？
@FelixKling 谢谢你，我犯了一个错误

标签： javascript reactjs local-storage

【解决方案1】：

在某些情况下，本地存储会给您带来必须处理的各种问题。保存一些重要变量的全局状态的更现代的解决方案是 Store，这里是 Redux for example

【讨论】：

由于 redux 仅存储在内存中，我认为 OP 在页面重新加载后仍然会出现状态消失的问题。 ?