如何避免在 ReactJS 同构应用程序中的服务器上出现错误“未定义本地存储”？

Posted 2023-02-22

【中文标题】如何避免在 ReactJS 同构应用程序中的服务器上出现错误“未定义本地存储”？

【英文标题】：How to avoid getting error 'localStorage is not defined' on server in ReactJS isomorphic app?

【发布时间】：2020-03-10 20:02:12

【问题描述】：

我在我的 webApp 中使用 localStorage 在客户端存储数据。但是当我试图使应用程序同构时，这会导致问题。由于 node 不是浏览器环境，它不能定义诸如 'window'、'localStorage' 等对象。 我该如何解决这个问题？

【问题讨论】：

你可以使用 cookie 来代替

【参考方案1】：

您可以通过检查模块是否不是'undefined'来检查代码是在服务器还是在客户端执行：

var isNode = typeof module !== 'undefined'

然后您可以继续在客户端只执行此代码：

if(!isNode)
   //use the local storage
   var myItem = localStorage.getItem(itemTitle)

但是，您应该在使用之前检查是否已定义Storage，因为并非所有浏览器都支持它：

if(typeof(Storage) !== "undefined")
   //use the local storage

【讨论】：

好点！我以前做let browserStorage = (typeof localStorage === 'undefined') ? null : localStorage;，然后在组件内部检查browserStorage。我想知道是否有更好的解决方法。

为什么不使用 cookie @jvalen

【参考方案2】：

标准有specific support 来解决此类问题。

您需要做的就是添加一个注释，通知标准有一个全局范围提供的变量。

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors