web-dev-qa-db-fra.com

Comment éviter d'obtenir l'erreur "localStorage n'est pas défini" sur le serveur dans l'application isomorphe ReactJS?

J'utilisais localStorage dans mon application Web pour stocker des données côté client. Mais lorsque j'ai essayé de rendre l'application isomorphe, cela a posé un problème. Le nœud n'étant pas un environnement de navigateur, il ne peut pas définir d'objets tels que 'fenêtre', 'localStorage', etc. Comment résoudre ce problème?

node.jsreactjsisomorphic-javascript
11
stkvtflw

Vous pouvez vérifier si le code est exécuté sur le serveur ou côté client en vérifiant si le module n'est pas 'undefined':

var isNode = typeof module !== 'undefined'

Vous pouvez ensuite continuer à exécuter uniquement ce code côté client:

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

Cependant, vous devriez déjà toujours vérifier si Storage est défini avant de l'utiliser car tous les navigateurs ne la prennent pas en charge:

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

Standard a support spécifique pour des problèmes comme celui-ci.

Tout ce que vous avez à faire est d’ajouter un commentaire informant la norme qu’une variable est fournie par la portée globale.

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors
0
zalpha314