Как избежать ошибки "localStorage не определен" на сервере в изоморфном приложении ReactJS?

Я использовал localStorage в своем webApp для хранения данных на стороне клиента. Но когда я попытался сделать приложение изоморфным, это вызывает проблему. Из-за node не является средой браузера, он не может определить такие объекты, как "окно", "localStorage" и т.д. Как решить эту проблему?

Ответ 1

Вы можете проверить, выполняется ли код на сервере или на стороне клиента, проверив, не является ли модуль '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
}

Ответ 2

Стандарт имеет конкретную поддержку для таких проблем.

Все, что вам нужно сделать, это добавить комментарий, информирующий стандарт, что есть переменная, предоставляемая глобальной областью.

// MyStuff.js
/* global localStorage */

// Use localStorage below with no linter errors