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

我写了一篇有关此问题的文章，其中包含有关何时应使用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");

Answer 4

请使用reactjs-localstorage

import {reactLocalStorage} from 'reactjs-localstorage';

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

Answer 5

您可以使用这4种方法。

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

Answer 6

您可以使用 use-local-storage-state。在处理 localStorage 时处理所有边缘情况实际上很难。

我在一年前创建了这个库，并且一直在维护它。

使用LocalStorage和React？

6 个答案: