因為react的state中存儲的數據在頁面刷新之后會清空(若設定了初始值則會重置為初始值),為了將state中的數據保留下來,我想到了HTML5中的localStorage,它的大小為5m,使用瀏覽器的本地存儲來保存鍵值對格式的數據.
LocalStorage的方法只有5個,直觀易用:
localStorage.key()
//該方法接受一個數值n作為參數,返回第n個鍵名
localStorage.setItem()
//該方法接受鍵名和鍵值兩個參數,將其存儲到localStorage中,若鍵名存在,則將其覆蓋
localStorage.getItem()
//該方法接受鍵名作為參數,返回鍵值
localStorage.removeItem()
//該方法接受鍵名作為參數,并刪除該鍵值對
localStorage.clear()
//該方法會清空存儲
我使用的方法是,將需要在刷新后保存的數據在賦值時使用localStorage.setItem()同步到localStorage中,然后在頁面刷新之后(在react的生命周期方法中)使用localStorage.getItem()取回數據
(以Chrome為例)網頁中的localStorage數據可以在開發者工具->Application->Storage中查看
注意事項:
1.localStorage的訪問遵從同源策略,所以不同源的網頁是無法共用localStorage的
2.localStorage不同于sessionStorage,它是沒有過期時間的(sessionStorage的數據會在瀏覽器關閉時清空),但它會在執行清空瀏覽數據時被清空
3.存進localStorage的數據會被強制類型轉換為string類型
瀏覽器支持情況:
sessionStorage與localStorage的方法完全相同,主要區別是存儲時間的長短
