IT技术 - 在 React 中使用 LocalStorage？ - 吾爱随笔录

在 React 中使用 LocalStorage？

IT技术 javascript reactjs

2021-03-25 23:32:13

从我目前所经历的情况来看，ReactJS 似乎没有更新 localStorage 的状态。我的代码如下。

var Frr = React.createClass({
getInitialState: function(){
return { lights: localStorage.getItem('state')}
},

switchoff: function(){
this.setState({lights: localStorage.setItem('state', 'off')}); 
},

switchon:function(){
this.setState({lights: localStorage.setItem('state', 'on')}); 
},

render:function(){
if (this.state.lights === 'on'){ return (
<div>
<p>The lights are ON</p>
<input type="submit" value="Switch" onClick={this.switchoff}/>
</div>
);}

if ( (this.state.lights === 'off')|| (!this.state.lights) ){ return (
<div>
<p>The lights are OFF</p>
<input type="submit" value="Switch" onClick={this.switchon}/>
</div>
);}


}
});

简单的应用。如果 localstorage 的状态为关闭或为空，则使用 ON 按钮渲染视图。如果 localstorage 打开，则使用 OFF 按钮渲染视图。

我希望能够根据 localStorage 的状态设置此渲染。我试过使用基本的布尔值做同样的事情，它按预期工作。但是，在使用 localStorage 时，有些东西似乎不起作用。

如果我的逻辑完全错误，我不会感到惊讶。

编辑：解释一下，按钮和视图不按应有的方式运行。当灯熄灭且 Storage 中没有任何内容时，该按钮会将 ON 添加到 localStorage，但不会更改视图。如果我刷新页面，页面呈现为 ON，当我点击它时，按钮通过将其关闭来工作。但它只能工作一次，这让我相信 OFF 开关可能有问题。

6个回答

在.setItem()本地存储功能的回报undefined。您需要执行本地存储更新，然后返回新的状态对象：

switchoff: function(){
    localStorage.setItem('state', 'off');
    this.setState({lights: 'off'}); 
},

这是另一个例子：

import React from 'react'
class App extends React.Component {
  constructor(props) {
    super(props);
    var storedClicks = 0;

    if (localStorage.getItem('clicks')) {
      storedClicks = parseInt(localStorage.getItem('clicks'));
    }

    this.state = {
      clicks: storedClicks,
    };
    this.click = this.click.bind(this);
  }

  click() {
    var newclick = this.state.clicks + 1;
    this.setState({clicks: newclick});
    // Set it
    localStorage.setItem('clicks', newclick);
  }

  render() {
    return (
      <div>
        <h2>Click the button a few times and refresh page</h2>
        <button onClick={this.click}>Click me</button> Counter {this.state.clicks}
      </div>
    );
  }
}
export default App;

这4种方法你可以使用。

// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');
// remove
localStorage.removeItem('myData');
// remove all
localStorage.clear();

我需要添加“窗口”。到每个方法的开头，以便它们起作用。

2021-05-26 23:32:13

在 React 中，我有这个确切的代码，运行后它仍然是空的： localStorage.setItem("test", "test");

2021-06-21 23:32:13

请使用reactjs-localstorage

import {reactLocalStorage} from 'reactjs-localstorage';

reactLocalStorage.set('var', true);
reactLocalStorage.get('var', true);
reactLocalStorage.setObject('var', {'test': 'test'});
reactLocalStorage.getObject('var');

无需使用第三方库，因为有一个默认库

2021-06-21 23:32:13

我写了一篇关于这个问题的帖子，其中包含一些关于何时应该使用 localStorage 的额外信息：

https://levbuchel.com/react-localstorage/

原答案：

您的数据由键值对确定和保存。

以下是我们如何添加、获取和删除此类值的示例：

// Add items
localStorage.setItem("theme", "dark");
localStorage.setItem("zoom", "5");
localStorage.setItem("font", "18");

// Get an item
var userTheme = localStorage.getItem("theme");

// Remove an item
localStorage.removeItem("theme");
localStorage.removeItem("font");

其它你可能感兴趣的问题

上一篇如何退出/关闭 React Native 应用程序？下一篇使用带有react的谷歌登录按钮