Nuxt JS LocalStorage в универсальном режиме не работает

Я работаю над приложением Nuxt JS, которое использует LocalStorage. При компиляции в режиме SPA он работает правильно, однако мне нужно переключить мой проект в режим universal, чтобы мои мета-заголовки и описания SEO работали при создании моего проекта, после переключения я получаю сообщение об ошибке на нескольких страницах, которые используют LocalStorage:

localStorage is not defined

У кого-нибудь есть предложения, чтобы исправить это?

Конечно, это не работает, локальное хранилище существует только на клиенте в браузере, а не в узле.

Aldarund 22.05.2019 17:26

как насчет window.localStorage? Покажите часть кода

Toni Michel Caubet 22.05.2019 19:28
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
2
2 629
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

У вас нет localStorage, потому что в среде Node.js такого нет. У вас также нет объектов window и document.

https://ssr.vuejs.org/guide/universal.html#access-to-platform-specific-apis

Nuxt.js использует Vue SSR под капотом.

Однако у вас все еще есть магазин (Vuex). И он будет синхронизирован между узлом и браузером.

Мне нужно было, чтобы данные сохранялись между сеансами для GDPR. Вы можете использовать смонтированное событие жизненного цикла и дождаться доступности window.localStorage. Затем назначьте его свойству данных и добавьте v-if в тег-оболочку, чтобы страница не начинала отрисовку до того, как будет доступно localeStorage. Я делаю это со статической сборкой nuxt:

<div v-if="localStorageReady">
    Awesome stuff here...
</div>

data() {
  return {
    localStorageReady: false,
  }
},

mounted() {
  if (window.localStorage) {
    this.localStorageReady = true
  }
}

Другие вопросы по теме