IT技术 - 如何在 react.js 中收听 localstorage - 吾爱随笔录

如何在 react.js 中收听 localstorage

IT技术 javascript reactjs localhost state

2021-04-13 13:58:49

我遇到了从本地存储中的数组获取数据的组件的问题。它在页面加载时获取初始数据，但是如何在 localstorage 更改时更新？

import React, {Component} from 'react'; 
    class MovieList extends Component {
       constructor(props){
          super(props)
            this.state = {
            filmList: []     
          }
       }    
      componentWillMount(){
          var film = [],
          keys = Object.keys(localStorage),
          i = keys.length;
          while ( i-- ) {
             film.push( localStorage.getItem(keys[i]))     
          }
          this.setState({filmList: film})

      };

      render(){
        return(
           <ul>
              <li>{this.state.filmlist}</li>            
           </ul>

        );
    }

}

export default MovieList;

2个回答

根据 Mozilla 的 Web API 文档StorageEvent，只要对Storage对象进行更改，就会触发一个。

我在我的应用程序中创建了一个 Alert 组件，只要对特定localStorage项目进行更改，该组件就会关闭。我会添加一个代码片段供您运行，但由于跨域问题，您无法通过它访问 localStorage。

class Alert extends React.Component {
    constructor(props) {
        super(props)
        this.agree = this.agree.bind(this)
        this.disagree = this.disagree.bind(this)
        this.localStorageUpdated = this.localStorageUpdated.bind(this)
        this.state = {
            status: null
        }
    }
    componentDidMount() {
        if (typeof window !== 'undefined') {
            this.setState({status: localStorage.getItem('localstorage-status') ? true : false})

            window.addEventListener('storage', this.localStorageUpdated)
        }
    }
    componentWillUnmount(){
        if (typeof window !== 'undefined') {
            window.removeEventListener('storage', this.localStorageUpdated)
        }
    }
    agree(){
        localStorage.setItem('localstorage-status', true)
        this.updateState(true)
    }
    disagree(){
        localStorage.setItem('localstorage-status', false)
        this.updateState(false)
    }
    localStorageUpdated(){
        if (!localStorage.getItem('localstorage-status')) {
            this.updateState(false)
        } 
        else if (!this.state.status) {
            this.updateState(true)
        }
    }
    updateState(value){
        this.setState({status:value})
    }
    render () {
        return( !this.state.status ? 
            <div class="alert-wrapper">
                <h3>The Good Stuff</h3>
                <p>Blah blah blah</p>
                <div class="alert-button-wrap">
                    <button onClick={this.disagree}>Disagree</button>
                    <button onClick={this.agree}>Agree</button>
                </div>
            </div>
         : null )
    }
}

对于任何遇到此问题的人，可以在此处找到“如何收听 localStorage 更改”的答案：https : //developer.mozilla.org/en-US/docs/Web/API/StorageEvent

摘要：window.addEventListener('storage',e => console.log(e))然后在不同的选项卡中更改 localStorage

2021-06-17 13:58:49

其它你可能感兴趣的问题

上一篇传播运算符在react抛出意外令牌错误下一篇如何组合和使用多个 Next.js 插件