使用LocalStorage和React？

Question

根据我目前所遇到的情况,似乎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的状态为off或empty,则使用ON按钮渲染视图.如果启用了localstorage,则使用OFF按钮渲染视图.

我希望能够根据localStorage的状态设置此渲染.我尝试使用基本布尔值做同样的事情,它按预期工作.但是,使用localStorage时,某些内容似乎不起作用.

如果我的逻辑完全消失,我不会感到惊讶.

编辑:要解释,按钮和视图不会按预期运行.当指示灯熄灭且存储中没有任何内容时,该按钮会将ON添加到localStorage,但不会更改视图.如果我刷新页面,页面呈现为ON,当我点击它时,按钮的工作方式是关闭它.但它只能工作一次,这让我相信OFF开关可能有问题.

Answer 1

在.setItem()本地存储函数返回undefined.您需要执行本地存储更新,然后返回新的状态对象:

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

Answer 2

这是另一个例子:

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;

Answer 3

这4种方法你可以用。

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