[REACTJS] react.js에 localStorage를 경청하는 방법

react.js에 localStorage를 경청하는 방법

해결법

1. ---

   1.모질라의 웹 API 문서 당 변경이 스토리지 오브젝트 될 때마다 해고 가져옵니다 StorageEvent있다.

   모질라의 웹 API 문서 당 변경이 스토리지 오브젝트 될 때마다 해고 가져옵니다 StorageEvent있다.

   나는 변경이 특정의 로컬 스토리지 항목으로 이루어진 때마다 터질 것 내 응용 프로그램 내에서 Alert 구성 요소를 만들었습니다. 당신이 실행하는 데 나는 코드를 추가 한 것입니다하지만 당신은 때문에 출처 간 문제에 통한 액세스하지 로컬 스토리지를 할 수 있습니다.

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

2. ---

   2.이 질문에 걸림돌 누군가를 위해, 대답은 여기에서 찾을 수 있습니다 "방식을 변경 로컬 스토리지에 듣는"합니다 : https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent

   이 질문에 걸림돌 누군가를 위해, 대답은 여기에서 찾을 수 있습니다 "방식을 변경 로컬 스토리지에 듣는"합니다 : https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent

from https://stackoverflow.com/questions/43313372/how-to-listen-to-localstorage-in-react-js by cc-by-sa and MIT license