如何正確設置ReactJS中的localStorage？

-1

我使用CodePen作爲ReactJS項目。我需要設置localStorage爲國家的一部分，那就是：如何正確設置ReactJS中的localStorage？

this.state={ 
    Things:{ 
     element:"value", 
     element2: "value" 
    }, 
    activated:-1 
}

因爲我需要設置只Things我決定設置localStorage在組件的生命週期：componentDidUpdate()

componentDidUpdate(prevProps,prevState){ 
    localStorage.setItem("myThings",JSON.stringify(this.state.Things)); 
}

這裏如果我撥打console.log(localStorage.getItem("myThings"))我沒有得到任何儲值。

對於localStorage檢查部分，我在構造函數中實現了一個解決方案，因爲我在React文檔中看到，應該更喜歡構造函數到componentWillMount()方法（儘管我也嘗試了後者）。

constructor(props){ 
    super(props); 
    if (localStorage.getItem("myThings")!==null){ 
     this.state={ 
      Things:JSON.parse(localStorage.getItem("myThings")), 
      activated:-1 
     } 
    } 
    ...

來源

2017-08-04 Alessandro Carrese

錯字僅在stackoverflow上 –

錯誤從分心。問題是if(...){...}聲明後構造函數中缺少else。因此每次在if語句中設置的狀態之後都會設置下一個狀態。

謝謝大家。

來源

2017-08-04 18:04:24

setItem是一個函數：

componentDidUpdate(prevProps,prevState){ 
    localStorage.setItem("myThings",JSON.stringify(this.state.Things)); 
}

來源

2017-08-04 15:56:35

此外，如果您需要存儲更復雜的數據結構，請參閱此答案：https://stackoverflow.com/a/2010994/2549154 – Matthew

從以上陳述setItem是一個函數。您可能還需要訪問window obj上的localStorage。

window.localStorage.setItem(...);

或爲其製作一個變量併爲此引用一個簡寫。

const storage = window.localStorage; 
storage.setItem(...);

來源

2017-08-04 15:59:25 Alexg2195

如何正確設置ReactJS中的localStorage？

回答

相關問題