时间戳

首页 > 解决方案 > 本地存储未定义

next.js - 本地存储未定义

问题描述

如何从 next.js 中的本地存储中获取值？当我在控制台中给出 localStorage.getItem() 时，它正在打印值。但是当我将它分配给一个变量时，它给出 LocalStorage is not defined 错误。我也有在我的本地存储中添加了 redux-persist

localStorage.getItem('id')

标签： next.jslocal-storage

解决方案

本地存储是现代 Web 浏览器原生的 Web API。它允许网站/应用程序在浏览器中存储数据，使这些数据在未来的浏览器会话中可用。当状态改变时，我们可以在组件中使用两种 React 生命周期方法来保存/更新浏览器 localStorage：

componentDidMount()
componentDidUpdate()

componentDidMount一旦您的组件可用并加载到浏览器中，它将运行。这是我们获得对 localStorage 的访问权限的时候。由于没有 window 对象，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
    }
  }

如果我们想通过 state 更新我们的本地存储值，我们可以使用 componentDidUpdate 轻松地用我们的更改值更新 localStorage 值。每次状态更改时都会运行此方法，因此我们可以简单地将 localStorage 中的数据替换为新状态。

componentDidUpdate() {
    localStorage.setItem('id', JSON.stringify(this.state))  
  }

推荐阅读