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