近期一個(gè)項(xiàng)目中要求前端h5中記錄一些數(shù)據(jù)，這些數(shù)據(jù)一只保存，除非用戶手動(dòng)清除才失效，其他情況包括會(huì)話過(guò)期一律不失效，此時(shí)就用到了LocalStorage，因?yàn)長(zhǎng)ocalStorage沒(méi)有過(guò)期時(shí)間，除非手動(dòng)刪除它會(huì)一直存在。

SessionStorage, LocalStorage, Cookie這三者都可以被用來(lái)在瀏覽器端存儲(chǔ)數(shù)據(jù)，而且都是字符串類型的鍵值對(duì)形式；

三者的區(qū)別；

• LocalStorage
• SessionStorage
• Cookie

LocalStorage和SessionStorage都是本地存儲(chǔ)，不會(huì)被發(fā)送到服務(wù)器上。同時(shí)空間比Cookie大很多，一般支持5-10M。 與Cookie類似，每個(gè)域名下會(huì)有不同的localStorage和SessionStorage實(shí)例，而且localStorage可以在多個(gè)標(biāo)簽頁(yè)中互相訪問(wèn)。 其中LocalStorage沒(méi)有過(guò)期時(shí)間，除非手動(dòng)刪除它會(huì)一直存在。而SessionStorage在瀏覽器會(huì)話結(jié)束時(shí)（關(guān)閉標(biāo)簽頁(yè)，不包括刷新和跳轉(zhuǎn)）清空。

Storage的使用

LocalStorage/SessionStorage提供的存儲(chǔ)也是基于字符串的鍵值對(duì)。可以通過(guò)setItem，getItem來(lái)訪問(wèn)其中的存儲(chǔ)項(xiàng):

let param = {
             "name": "zhangsan",
             "age": 18,
             "sex": "female",
             "phone": "8888888",
            };
localStorage.setItem("commonData", JSON.stringify(param));

在控制臺(tái)運(yùn)行效果如下，可以看到localStorage中已經(jīng)存有commonData了；因?yàn)樗荒艽鎯?chǔ)字符串，要存JSON只能序列化為字符串；

setIte.png

從localStorage獲取commonData的值：
JSON.parse(localStorage.getItem("commonData"))

getItem.png

清除localStorage某條信息；
｀l(xiāng)ocalStorage.removeItem("commonData");｀

removeItem.png

清除localStorage保存對(duì)象的全部數(shù)據(jù)
localStorage.clear();