在React中让localStorage在页面刷新时保留其内容

Question

我正在尝试向我的应用程序添加一个喜欢的页面，该页面基本上将列出一些先前插入的数据。我希望从localStorage提取数据。它基本上可以正常工作，但是当我导航到另一个页面并返回时，localStorage再次为空。我希望刷新应用程序时localStorage中的数据能够保留。

数据从此处设置为localStorage

font

然后从这里获取

"-*-Lucida Console-normal-r-*-*-12-*-*-*-c-*-iso8859-1"

Answer 1

您的代码存在一些问题。此代码块：

useEffect(() => {
    combinationArray.push(combination);
    localStorage.setItem('combinations', JSON.stringify(combinationArray));
}, [combination]);

只要依赖项数组[combination]发生更改（包括第一个渲染），它将运行。问题在于combination在第一个渲染器上具有所有空值，因此它会覆盖您的本地存储项目。

此外，combinationArray.push(combination);不会导致重新渲染，因为您只是在更改javascript值，因此react不知道状态已更改。您应该使用updater函数react给您，就像这样：

setCombinationArray(prevArr => [...prevArr, combination])

您应按combinationArray并将结果设置为新的状态值，并注意不要覆盖旧的本地存储值