Question

如何在next.js中从本地存储中获取值？当我在控制台中给localStorage.getItem（）时，它正在打印值。但是当我将其分配给变量时，它却给LocalStorage定义了错误。我还在本地存储中添加了redux-persist

localStorage.getItem（'id'）

Answer 1

localStorage是对象window的属性。它属于浏览器，而不是next.js或React，并且在装入React组件之前无法访问localStorage。因此，您需要在调用localStorage之前确保已安装React应用，例如在localStorage.getItem内部调用componentDidMount。

Answer 2

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

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
    }
  }

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

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

Answer 3

首先要注意的是，localStorage与next.js或redux-persist无关。 localStorage是内部window对象，无需定义即可直接访问。

我认为您是在尝试设置localStorage之前尝试访问它，因此您会遇到此错误。

一个简单的解决方案是使用Conditional (ternary) operator ，

const id = localStorage.getItem('id') ? localStorage.getItem('id') : "set your own default value";
console.log(id);

未定义本地存储

3 个答案: