How to listen to localstorage in react.js How to listen to localstorage in react.js reactjs reactjs

How to listen to localstorage in react.js


Per Mozilla's Web API docs there's a StorageEvent that gets fired whenever a change is made to the Storage object.

I created an Alert component within my application that would go off whenever a change was made to a specific localStorage item. I would've added a code snippet for you to run but you can't access localStorage through it due to cross-origin issues.

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 )    }}


For anyone stumbling upon this question, the answer to "how to listen to localStorage changes" can be found here:https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent