sessionStorage图贸、localStorage
localStorage與sessionStorage(點(diǎn)擊查看MDN解釋)都是web在存儲(chǔ)用戶數(shù)據(jù)時(shí)常用到的兩個(gè)對(duì)象改艇，兩者的區(qū)別：
>sessionStorage：存儲(chǔ)的數(shù)據(jù)只作用于當(dāng)前會(huì)話（含重新加載或恢復(fù)頁面），會(huì)話結(jié)束數(shù)據(jù)過期
>localStorage：存儲(chǔ)的數(shù)據(jù)沒有過期期限纹安，數(shù)據(jù)存儲(chǔ)在本地，解決了cookie存儲(chǔ)空間不足的問題(cookie中每條cookie的存儲(chǔ)空間為4k)，localStorage中一般瀏覽器支持的是5M大杏俊（因?yàn)g覽器而異）
語法
//將sessionStorage/localStorage賦值給Storage
//var Storage = sessionStorage;
var Storage = localStorage;
// 保存數(shù)據(jù)到Storage
Storage.setItem(`myCat`, `Tom`);
// 從Storage獲取數(shù)據(jù)
Storage.getItem(`myCat`);
// 從Storage刪除保存的數(shù)據(jù)
Storage.removeItem(`myCat`);
// 從Storage刪除所有保存的數(shù)據(jù)
Storage.clear();
>setItem(key,value)：增加一個(gè)數(shù)據(jù)項(xiàng)，以鍵值對(duì)形式保存
>getItem(key)：根據(jù)鍵名獲取對(duì)應(yīng)的值
>removeItem(key)：根據(jù)鍵名刪除一個(gè)數(shù)據(jù)項(xiàng)
>clear()：清空所有數(shù)據(jù)
示例
// 獲取文本輸入框
var field = document.getElementById("field");
// 檢測是否存在 autosave 鍵值
// (這個(gè)會(huì)在頁面偶然被刷新的情況下存在)
if (sessionStorage.getItem("autosave")) {
// 恢復(fù)文本輸入框的內(nèi)容
field.value = sessionStorage.getItem("autosave");
}
// 監(jiān)聽文本輸入框的 change 事件
field.addEventListener("change", function() {
// 保存結(jié)果到 sessionStorage 對(duì)象中
sessionStorage.setItem("autosave", field.value);
});
應(yīng)該注意的是驮吱，無論是 localStorage 還是 sessionStorage 中保存的數(shù)據(jù)都僅限于該頁面的協(xié)議茧妒。
