因為react的state中存儲的數(shù)據(jù)在頁面刷新之后會清空(若設定了初始值則會重置為初始值),為了將state中的數(shù)據(jù)保留下來,我想到了HTML5中的localStorage,它的大小為5m,使用瀏覽器的本地存儲來保存鍵值對格式的數(shù)據(jù).

LocalStorage的方法只有5個,直觀易用:

localStorage.key()
//該方法接受一個數(shù)值n作為參數(shù),返回第n個鍵名
localStorage.setItem()
//該方法接受鍵名和鍵值兩個參數(shù),將其存儲到localStorage中,若鍵名存在,則將其覆蓋
localStorage.getItem()
//該方法接受鍵名作為參數(shù),返回鍵值
localStorage.removeItem()
//該方法接受鍵名作為參數(shù),并刪除該鍵值對
localStorage.clear()
//該方法會清空存儲

我使用的方法是,將需要在刷新后保存的數(shù)據(jù)在賦值時使用localStorage.setItem()同步到localStorage中,然后在頁面刷新之后(在react的生命周期方法中)使用localStorage.getItem()取回數(shù)據(jù)

(以Chrome為例)網(wǎng)頁中的localStorage數(shù)據(jù)可以在開發(fā)者工具->Application->Storage中查看

注意事項:
1.localStorage的訪問遵從同源策略,所以不同源的網(wǎng)頁是無法共用localStorage的

2.localStorage不同于sessionStorage,它是沒有過期時間的(sessionStorage的數(shù)據(jù)會在瀏覽器關閉時清空),但它會在執(zhí)行清空瀏覽數(shù)據(jù)時被清空

3.存進localStorage的數(shù)據(jù)會被強制類型轉(zhuǎn)換為string類型

瀏覽器支持情況:

sessionStorage與localStorage的方法完全相同,主要區(qū)別是存儲時間的長短