如何在ReactJS同构应用程序中避免在服务器上出现错误“localStorage未定义”?

Question

我在我的Web应用程序中使用localStorage来在客户端存储数据。但当我尝试使应用程序具有同构性时，这会导致问题。由于Node不是浏览器环境，它无法定义诸如“window”、“localStorage”等对象。 那么我该如何解决这个问题呢？

- stkvtflw

---

你可以使用cookies来代替。 - amdev

Answer 1

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

您可以通过检查模块是否不等于'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
}

- TmKVU

---

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

为什么不用 Cookies @jvalen - amdev

Answer 2

标准库对于这类问题有特定的支持。

你只需要添加一条注释，告诉标准库全局作用域中提供了一个变量即可。

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors

- zalpha314