Jak uniknąć błędu "localStorage nie jest zdefiniowany" na serwerze w aplikacji izomorphic ReactJS?

Question

Używam localStorage w mojej webApp do przechowywania danych po stronie klienta. Ale kiedy próbowałem zrobić to izomorficznie, powoduje to problem. Ponieważ węzeł nie jest środowiskiem przeglądarki, nie może definiować takich obiektów, jak "okno", "localStorage" itp. Jak rozwiązać ten problem?

Answer 1

Można użyć sprawdzenie, czy kod jest wykonywany na serwerze lub na stronie klienta poprzez sprawdzenie, czy moduł nie jest 'undefined':

var isNode = typeof module !== 'undefined' 

Następnie można przystąpić tylko do wykonywanego tego kodu na kliencie strona:

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

jednak należy zawsze sprawdzić, czy już Storage jest zdefiniowany przed użyciem, ponieważ nie wszystkie przeglądarki obsługują go:

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

Answer 2

Standard ma numer specific support w przypadku takich problemów.

Wszystko, co musisz zrobić, to dodać komentarz informujący standard, że istnieje zmienna dostarczona przez globalny zasięg.

// MyStuff.js 
/* global localStorage */ 

// Use localStorage below with no linter errors