web-dev-qa-db-ja.com

ReactJS同形アプリのサーバーでエラー「localStorageが定義されていません」が発生しないようにするにはどうすればよいですか？

クライアント側にデータを保存するために、webAppでlocalStorageを使用していました。しかし、アプリを同型にしようとすると、問題が発生します。ノードはブラウザ環境ではないため、「ウィンドウ」、「localStorage」などのオブジェクトを定義できません。この問題を解決するにはどうすればよいですか？

node.jsreactjsisomorphic-javascript
11
stkvtflw

モジュールが'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
}
10
TmKVU

標準には、このような問題に対して 特定のサポート があります。

グローバルスコープによって提供される変数があることを標準に通知するコメントを追加するだけです。

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors
1
zalpha314