Gatsby：使用 localStorage 存储数据答案

【问题标题】：Gatsby: Using localStorage to store dataGatsby：使用 localStorage 存储数据
【发布时间】：2021-01-06 22:22:46
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs cookies local-storage gatsby server-side-rendering

【解决方案1】：

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

/* src/pages/index.js */

import React, {useState, useEffect} from 'react'

const IndexPage = () => {
  const [agreed, setAgreed] = useState(false)

  // This runs when the page is loaded.
  useEffect(() => {
    if (localStorage.getItem('agree')) {
      setAgreed(true)
    }
  }, [])

  const handleClick = () => {
    localStorage.setItem('agree', 'true')
    setAgreed(true)
  }

  const AgreeButton = <button onClick={handleClick}>Click me to agree</button>

  return (
    <>
      <h1>Welcome to my page!</h1>
      {agreed
        ? <p>You agreed!</p>
        : AgreeButton
      }
    </>
  )
}

export default IndexPage

我想你可能误解了盖茨比的工作原理。使用 Create React App 之类的东西，服务器会发送一个非常简单的 HTML 文档，正文中有一个 <root> 元素。使用 Gatsby，页面是在构建时构建的。这有助于提高性能，因为用户的浏览器不必从头开始完全构建页面。

也许你在想，正因为如此，你不能做很多你可以用 Create React App 做的事情，因为它在到达用户之前将所有内容都归结为 HTML。事实并非如此。多亏了 React Hydration，你仍然可以使用 hooks 和 state 以及所有有趣的东西。来自Gatsby docs：

浏览器可以使用 Gatsby 在 /public 文件夹中创建的内容“接起”服务器停止的位置，并像任何其他 React 应用程序一样在浏览器中呈现该站点。

【讨论】：