如何避免在ReactJS同构应用程序中的服务器上获取错误“localStorage未定义”？

Question

我在webApp中使用localStorage在客户端存储数据。但是，当我试图使应用程序同构时，这会导致一个问题。由于节点不是浏览器环境，因此无法定义“window”，“localStorage”等对象。 我该如何解决这个问题？

Answer 1

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

var isNode = typeof module !== 'undefined'

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

if(!isnode){
   //use the local storage
}

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

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

Answer 2

标准版有specific support这样的问题。

您需要做的就是添加一条评论，告知标准全局范围提供变量。

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors