Javascript 在 React 中使用 LocalStorage？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38423108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using LocalStorage with React?
提问by Jason Chen
From what I am experiencing so far, it doesn't seem like ReactJS updates with the state of localStorage. My code below.
从我目前所经历的情况来看，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>
);}
}
});
Simple application. If the state of localstorage is off or empty, then render the view with the ON button. If localstorage is on, then render the view with the OFF button.
简单的应用。如果 localstorage 的状态为 off 或 empty，则使用 ON 按钮渲染视图。如果 localstorage 打开，则使用 OFF 按钮渲染视图。
I want to be able to set this render based on the state of localStorage. I have tried doing the same thing using basic booleans, and it works as expected. However, when using localStorage, something doesn't appear to work.
我希望能够根据 localStorage 的状态设置此渲染。我尝试使用基本布尔值做同样的事情，并且它按预期工作。但是，在使用 localStorage 时，有些东西似乎不起作用。
I wouldn't be surprised if my logic is simply off.
如果我的逻辑完全错误，我不会感到惊讶。
EDIT: To explain, the button and the view don't act as they should. When the lights are off and there is nothing in Storage, the button adds ON to localStorage, but does not change the view. If I refresh the page, the page renders ON, and when I click on it the button works by turning it OFF. But it only works once, which leads me to believe there may be a problem with the OFF switch.
编辑：解释一下，按钮和视图没有按照它们应该的方式运行。当灯熄灭且 Storage 中没有任何内容时，该按钮会将 ON 添加到 localStorage，但不会更改视图。如果我刷新页面，页面呈现为 ON，当我点击它时，按钮通过将其关闭来工作。但它只能工作一次，这让我相信 OFF 开关可能有问题。
回答by Pointy
The .setItem()local storage function returns undefined. You need to perform the local storage update and then return the new state object:
在.setItem()本地存储功能的回报undefined。您需要执行本地存储更新，然后返回新的状态对象：
switchoff: function(){
localStorage.setItem('state', 'off');
this.setState({lights: 'off'});
},
回答by taggartJ
Here is just another Example:
这是另一个例子：
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;
回答by Ankit Kumar Rajpoot
These 4 methods u can use.
这4种方法你可以使用。
// setter
localStorage.setItem('myData', data);
// getter
localStorage.getItem('myData');
// remove
localStorage.removeItem('myData');
// remove all
localStorage.clear();
回答by Dmitry Kalinin
Use please reactjs-localstorage
import {reactLocalStorage} from 'reactjs-localstorage';
reactLocalStorage.set('var', true);
reactLocalStorage.get('var', true);
reactLocalStorage.setObject('var', {'test': 'test'});
reactLocalStorage.getObject('var');
