Gatsby：使用localStorage存储数据

Question

我有一个 Gatsby 网站，并且正在实施 GDPR 同意横幅。我想将状态存储在本地存储中，其中包含与用户是否接受 GDPR 条款相关的“true”或“false”字符串。

例如，用户第一次访问该网站。在本地存储中，有一个“GDPR_Accepted”键设置为“false”。如果用户不接受主页上的 GDPR 条款，则横幅将继续显示在用户访问的每个页面上。当用户单击接受时，GDPR_Accepted 值设置为“true”，并且我的 React 组件中的三元运算符应用隐藏横幅的 CSS 类。

因为我使用的是本地存储，所以即使用户离开页面并稍后返回（假设他们没有清除浏览历史记录），“true”值也应该持续存在。问题出在盖茨比身上。Gatsby 使用服务器端渲染，当用户接受 GDPR 条款并离开网站并返回时，GDPR 值将重置为“false”。当设置为“true”时，Gatsby 无法保留之前的本地存储数据。

如何在 Gatsby 项目中将数据保存在本地存储中？仅使用 React 状态来存储用户是否接受 GDPR 条款是否更有意义？

Answer 1

我已经构建了一个完整的工作示例只是为了确认它是否有效。只需运行gatsby build，然后gatsby serve看看它构建后应该如何运行。

\n

/* src/pages/index.js */\n\nimport React, {useState, useEffect} from \'react\'\n\nconst IndexPage = () => {\n  const [agreed, setAgreed] = useState(false)\n\n  // This runs when the page is loaded.\n  useEffect(() => {\n    if (localStorage.getItem(\'agree\')) {\n      setAgreed(true)\n    }\n  }, [])\n\n  const handleClick = () => {\n    localStorage.setItem(\'agree\', \'true\')\n    setAgreed(true)\n  }\n\n  const AgreeButton = <button onClick={handleClick}>Click me to agree</button>\n\n  return (\n    <>\n      <h1>Welcome to my page!</h1>\n      {agreed\n        ? <p>You agreed!</p>\n        : AgreeButton\n      }\n    </>\n  )\n}\n\nexport default IndexPage\n

\n

我想你可能误解了盖茨比的工作原理。通过像 Create React App 这样的东西，服务器会发送一个相当简单的 HTML 文档，<root>正文中只有一个元素。对于 Gatsby，页面是在构建时构建的。这对性能有很大帮助，因为用户的浏览器不必完全从头开始构建页面。

\n

也许您认为正因为如此，您无法完成使用 Create React App 可以做的很多事情，因为它在到达用户之前将所有内容都归结为 HTML。事实并非如此。多亏了 React Hydration，你仍然可以使用钩子和状态以及所有有趣的东西。来自盖茨比文档：

\n

\n

浏览器可以 \xe2\x80\x9c 拾起服务器在 /public 文件夹中由 Gatsby 创建的内容所留下的 \xe2\x80\x9d 位置，并像任何其他 React 应用程序一样在浏览器中呈现该站点。

\n

\n