使用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>
);}


}
});

简单的应用程序。如果本地存储的状态关闭或为空，则使用“ON”按钮呈现视图。如果本地存储打开，则使用“OFF”按钮呈现视图。

我希望能够根据localStorage的状态设置此呈现方式。我尝试使用基本布尔值做同样的事情，结果如预期般工作。但是，当使用localStorage时，似乎有些问题。

如果我的逻辑有误，我不会感到意外。

编辑：解释一下，按钮和视图的行为不像应该的那样。当灯关闭并且存储中没有任何内容时，按钮会向localStorage添加ON，但不会更改视图。如果我刷新页面，页面呈现ON，当我点击它时，按钮可以正常工作，并将其关闭。但它只能工作一次，这让我认为OFF开关可能存在问题。

- Jason Chen

---

“something doesn't appear to work” 的翻译是：“某事似乎无法正常工作”，请问是什么东西出了问题，具体表现如何？ - Pointy

Answer 1

.setItem() 本地存储函数返回 undefined。你需要执行本地存储更新，然后返回新的状态对象：

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

- Pointy

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;

- taggartJ

Answer 3

这里有四种方法可供使用。

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

- Ankit Kumar Rajpoot

---

在React中，我有这段完全相同的代码，在运行后它仍然是空的：localStorage.setItem("test", "test"); - Aaron Franke

我需要在每个方法的开头添加 "window." 才能让它们正常工作。 - lisen kaci

Answer 4

我已经写了一篇关于这个问题的文章，其中包含了一些额外的信息，说明何时应该使用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");

- Lev Buchel

Answer 5

请使用reactjs-localstorage来存储数据。最初的回答。

import {reactLocalStorage} from 'reactjs-localstorage';

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

- Dmitry Kalinin

---

无需使用第三方库，因为有默认库可用。 - Coke

Answer 6

你可以使用use-local-storage-state。实际上，处理localStorage的所有边缘情况是很困难的。

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

- astoilkov

Answer 7

React/Typescript/localStorage

你可以创建一个 hook 来使使用 localStorage 更加有趣。

import { useEffect, useState } from 'react';

export const useLocalStorage = (storageKey: string, fallbackState: any) => {
  const [value, setValue] = useState<any>(fallbackState);
  const [error, setError] = useState<any>();

  useEffect(() => {
    try {
      const getItemValue = JSON.parse(
        localStorage.getItem(storageKey) as string
      );
      if (getItemValue) {
        setValue(currentValue);
      }
    } catch (e) {
      setError(e);
    }
  }, [storageKey]);

  useEffect(() => {
    try {
      localStorage.setItem(storageKey, JSON.stringify(value));
    } catch (e) {
      setError(e);
    }
  }, [fallbackState, storageKey, value]);

  return { value, setValue, error };
};

使用方法

const defaultValue = {
  name: 'John Doe',
  location: 'New York',
}

const {
  value
  setValue
  error,
} = useLocalStorage('local-storage-key', defaultValue);

value 包含键 local-storage-key 的当前 localStorage 值。

您可以使用 setValue 设置新值。

error 返回从钩子中的 catch 返回的任何错误。

- Victor Ejiogu

Answer 8

const { data } = response;

const userData = data.user;
// Token Save to local Storage

const access = JSON.stringify(data.tokens);
const refresh = JSON.stringify(data.tokens);

localStorage.setItem('accessToken', access);
localStorage.setItem('refreshToken', refresh);

- Ćh Sufyan