问题 #3420💬 已回答提出于 2021年4月28日作者 sanchit360 个反应

[紧急!! 问题：如何在 reactjs 项目中实现 LocalStorage？？

快速解答作者 artf

本地storageManager会帮你完成所有工作，所以你不需要做现在那些手动操作。所以保留storageManager选项，把剩下的都删掉。附言：使用useEffect要小心，添加一个空数组作为依赖，否则它会在每次渲染时调用初始化......

阅读下方完整回答 ↓

问题

我正在尝试在 Reactjs 应用中实现 localstorage，但不知为何它没有在 localstorage 中存储数据 “JavaScript useEffect（（） => { const templateComponent = JSON.parse（ localStorage.getItem（“gjs-components”） ); console.log（模板组件）; const templateStyle = JSON.parse（localStorage.getItem（“gjs-style”））; console.log（模板样式）; const editor = Grapesjs.init（{ 容器：“#editor”，宽度：“100VW”，高度：“100VH”， styleManager： { clearProperties： true， }, components： JSON.parse（localStorage.getItem（“gjs-components”））， style： JSON.parse（localStorage.getItem（“gjs-style”））， storageManager： { 编号：“GJS-”，类型：“本地”，自动保存：正确，自动加载：正确， stepsBeforeSave： 1， }, }); ```

回答（2）

artf• 2021年4月28日

本地storageManager会帮你完成所有工作，所以你不需要做现在那些手动操作。所以保留storageManager选项，把剩下的都删掉。

附言：使用useEffect要小心，添加一个空数组作为依赖，否则它会在每次渲染时调用初始化......

GJSBlock• 2026年5月17日

谢谢你举报，@sanchit36。关于[紧急!!的好问题问题：如何在 reactjs 项目中实现 LocalStorage？？.推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'com...

在 GitHub 上查看完整讨论 →