Как я могу получить значения из локального хранилища в next.js? Когда я даю localStorage.getItem() в консоли, он печатает значения. Но когда я назначаю это переменной, он дает LocalStorage не определена ошибка. У меня также добавлено сокращение-сохранение в моем локальном хранилище
localStorage.getItem('id')
Локальное хранилище — это веб-API, встроенный в современные веб-браузеры. Это позволяет веб-сайтам/приложениям хранить данные в браузере, делая эти данные доступными в будущих сеансах браузера. Есть два метода жизненного цикла React, которые мы можем использовать в нашем компоненте для сохранения/обновления локального хранилища браузера при изменении состояния:
componentDidMount()
componentDidUpdate()
componentDidMount запустится, как только ваш компонент станет доступным и загрузится в браузер. Это когда мы получаем доступ к localStorage. Поскольку localStorage не находится в Node.js/Next.js из-за отсутствия оконного объекта, нам придется подождать, пока компонент смонтируется, прежде чем проверять localStorage на наличие каких-либо данных. Итак, если вы хотите присвоить значение локального хранилища переменной, сделайте это внутри метода componentDidMount.
componentDidMount() {
const data = localStorage.getItem('id')
console.log(data);
if(data) {
//here you can set your state if it is necessary
}
}
И если мы хотим обновить значение нашего локального хранилища через состояние, мы можем легко обновить значение localStorage нашим значением изменений, используя componentDidUpdate. Этот метод запускается каждый раз при изменении состояния, поэтому мы можем просто заменить данные в localStorage нашим новым состоянием.
componentDidUpdate() {
localStorage.setItem('id', JSON.stringify(this.state))
}
localStorage является свойством объекта window. Он принадлежит браузеру, а не next.js или React, и доступ к localStorage невозможен, пока компонент React не будет смонтирован. Поэтому вам нужно убедиться, что ваше приложение React смонтировано перед вызовом localStorage, например. звоню localStorage.getItem внутрь componentDidMount.
Во-первых, обратите внимание на то, что localStorage не имеет ничего общего с next.js или redux-persist. localStorage является внутренним объектом window и может быть напрямую доступен без какого-либо определения.
Я думаю, вы пытаетесь получить доступ к localStorage до того, как он будет установлен, поэтому вы получите эту ошибку.
Простое решение — использовать условный (тройной) оператор. ,
const id = localStorage.getItem('id') ? localStorage.getItem('id') : "set your own default value";
console.log(id);
