LocalStorage、SessionStorage

Sleepy 發(fā)布于2019-08-23 12:22 / 442人閱讀

摘要：和接口用于腳本在瀏覽器保存數(shù)據(jù)。存對象的時候會變成，因為解決方法用來存。而的變量不存在頁面里，系統(tǒng)存在客戶端本地的盤的一個文件里。除了保存期限的長短不同，這兩個對象的其他方面都一致。總結(jié)在用戶關(guān)閉頁面會話結(jié)束后就失效。

window.sessionStorage和window.localStorage接口用于腳本在瀏覽器保存數(shù)據(jù)。

LocalStorage 基本使用 設(shè)置

window.sessionStorage.setItem("key", "value");
window.localStorage.setItem("key", "value");

獲取

window.sessionStorage.getItem("key")
window.localStorage.getItem("key")

清除

localStorage.removeItem("key");
window.localStorage.clear()

完整用法

注意點

localStorage是html5技術(shù)提供的API，html5中新增加的標(biāo)簽,技術(shù)(包括promise,localStorage等),統(tǒng)稱為html5

session是服務(wù)器上存的hash，但localStorage實質(zhì)也是一個hash，只不過是瀏覽器上的hash

localStorage只能存String類型的字符串

存函數(shù)會轉(zhuǎn)化成字符串。存對象的時候會變成"[object Object]"，因為({1:"xxx"}).toString()//"[object Object]"

解決方法：用json來存。例如：localStorage.setItem("jsonString", JSON.stringify({name: "mtt"}))

使用注意 localStorage里的數(shù)據(jù)和js變量有什么區(qū)別？

當(dāng)一個js變量被從新賦值，變量的值當(dāng)即被改變，但當(dāng)頁面刷新時，變量又回到最初的狀態(tài)。
而localStorage的變量不存在頁面里，windows系統(tǒng)存在客戶端本地的C盤的一個文件里。

簡單的使用實例

想要只提示用戶一次，當(dāng)下次用戶進入這個網(wǎng)站上的時候，不跳出提示框。

總結(jié)

LocalStorage 跟 HTTP 無關(guān)(而cookie是http的一個頭)

發(fā)送HTTP請求時不會帶上 LocalStorage 的值

只有相同域名的頁面才能互相讀取 LocalStorage（沒有同源那么嚴(yán)格）

每個域名 localStorage 最大存儲量為 5Mb 左右（每個瀏覽器不一樣）

常用場景：記錄有沒有提示過用戶（沒有用的信息，不能記錄密碼）

LocalStorage 永久有效，除非用戶主動清理緩存

SessionStorage

sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會話（session），當(dāng)會話結(jié)束（通常是窗口關(guān)閉），數(shù)據(jù)被清空；localStorage保存的數(shù)據(jù)長期存在，下一次訪問該網(wǎng)站的時候，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同，這兩個對象的其他方面都一致。

總結(jié)：SessionStorage 在用戶關(guān)閉頁面（會話結(jié)束）后就失效。其余的和localstorage一樣