将信息保存到 localStorage，但 localStorage 不会在刷新时保存它 (React.js)答案

【问题标题】：Saving information to localStorage, but localStorage is not saving it on refresh (React.js)将信息保存到 localStorage，但 localStorage 不会在刷新时保存它 (React.js)
【发布时间】：2022-12-06 13:40:04
【问题描述】：

我正在创建这个项目，但我无法了解为什么我的代码在刷新时没有保存到 localStorage。当我将内容添加到 JSON 文件时，它会正确保存，但是当我重新加载 JSON 文件中的所有数据时，它们就会消失。

我已经尝试了许多不同的格式来加载信息，例如在格式字符串中添加其他格式，但似乎没有任何效果。

     const [notes, setNotes] = useState([
        ]);

    useEffect(() => {
        const savedNotes = localStorage.getItem('react-notes-app-data');
        if (savedNotes != null) { setNotes(JSON.parse(savedNotes)); }
    }, []);

    useEffect(() => {
        localStorage.setItem(
            'react-notes-app-data',
            JSON.stringify(notes)
        );
        setDisplayNotes(notes);
        }, [notes]);

【问题讨论】：

我认为您应该在存储中设置数据之前添加一个条件notes != null。另外，请确保无论何时修改 notes 数组，它都应该是一个新数组，否则它不会触发 useEffect，因为对象相同。
这里的答案应该能让你工作：How to make useEffect listening to any change in localStorage?。

标签： reactjs json local-storage

【解决方案1】：

尝试像这样初始化你的 useState

let initialNotes;

try {
  initialNotes = JSON.parse(localStorage.getItem('react-notes-app-data'));
catch(err) {
  initialNotes = [];
}
const [notes, setNotes] = useState(initialNotes);

并摆脱您的整个第一次 useEffect 调用。

【讨论】：

【解决方案2】：

Notes 必须是一个新对象才能触发 useEffect，因为它不进行深度检查。

我已经创建了一个示例，您可以尝试运行它并查看它是否有效：

https://codesandbox.io/s/silly-water-jiwi6x?file=/src/App.js

【讨论】：