SessionStorage?和 LocalStorage 的辨析

SessionStorage?和 LocalStorage 是瀏覽器提供的兩種數(shù)據(jù)存儲機(jī)制，當(dāng)然這種實(shí)現(xiàn)是依據(jù) HTML5?Web 存儲標(biāo)準(zhǔn)，具體使用非常簡單大家可以自行查閱相關(guān)資料。此外目前還有兩種很有用的前端存儲機(jī)制分別叫做 WEB SQL、IndexedDB（這里注意的是：Web SQL 已經(jīng)不再是 W3C 的標(biāo)準(zhǔn)，不過有意思的是 w3c 表示不將其納入標(biāo)準(zhǔn)這么多年之后，瀏覽器中至今仍有 chrome 依然毫不猶豫的支持該標(biāo)準(zhǔn)，Firefox、edge、IE 均已不在支持。詳情點(diǎn)擊查看）Web SQL 是后端程序員熟知的關(guān)系型數(shù)據(jù)庫，具體實(shí)現(xiàn)采用的是智能手機(jī)中常用的微型關(guān)系數(shù)據(jù)庫 SQLite。而 indexedDB 則是后端程序員熟知的另一種非關(guān)系型數(shù)據(jù)庫 （NOSQL），即近幾年新流行起來的非關(guān)系型數(shù)據(jù)庫，如果你不熟悉那就可以簡單的理解成 key-value 形式的存儲模型，感興趣的可以自行搜索了解更多。這些內(nèi)容不再本次討論范圍內(nèi)。

SessionStorage?和 LocalStorage 使用操作基本類似，兩者最主要的區(qū)別在于生命周期不同，SessionStorage 顧名思義就是存在與會(huì)話階段，當(dāng)會(huì)話結(jié)束時(shí)，SessionStorage 存儲的數(shù)據(jù)即會(huì)失效。那么關(guān)鍵來了什么才表示會(huì)話結(jié)束？其實(shí)在瀏覽器中一個(gè)活動(dòng)標(biāo)簽頁即代表一個(gè)會(huì)話【Session 說道這里，可能對后端比較熟悉的小伙伴會(huì)想到 HTTP 會(huì)話中 SessionID，沒錯(cuò)這里兩者存在一定的聯(lián)系，但并不完全等同，由于 session ID 存在是為了解決 HTTP 協(xié)議的無狀態(tài)性，要使基于?HTTP 協(xié)議的會(huì)話能夠得以維持就需要通過 session id 來實(shí)現(xiàn)，并且 session 的實(shí)現(xiàn)依賴的是 cookie 機(jī)制，OK 點(diǎn)到為止，詳情大家自行查閱】，如果當(dāng)前標(biāo)簽頁被關(guān)掉即代表，當(dāng)前會(huì)話結(jié)束，此時(shí)當(dāng)前?SessionStorage 中存儲的數(shù)據(jù)就會(huì)被瀏覽器自動(dòng)銷毀。

相比之下 LocalStorage 生命周期就很長了，LocalStorage 是可以一直存活的，哪怕是你關(guān)閉瀏覽器，他依然存在。除非人為手動(dòng)刪除，所以我們可以將一些需要永久性存儲的數(shù)據(jù)放置在?LocalStorage 中（當(dāng)然也可以是 Cookie 中，當(dāng)然鑒于 cookie 的特自動(dòng)攜帶傳輸?shù)奶匦?#xff0c;如果不是每次都有必要攜帶的數(shù)據(jù)請求就不要放在 cookie 中，這樣不僅浪費(fèi)帶寬，而且通常情況下前考慮到安全性，一般都是不允許前端使用 JS 直接操作 cookie 的），而那些只需要在會(huì)話階段需要存在的數(shù)據(jù)則放在?SessionStorage 中。

最后再多啰嗦一句，盡管這些存儲機(jī)制都有自己的一些特色，但是他們也都遵循一條原則，那就是 “同源策略”。關(guān)于同源策略鋪開講也內(nèi)容也是很多的，大家可以自行搜索了解。

自己之前的幾個(gè)疑問？

1. 那么使用瀏覽器打開兩個(gè)同樣的網(wǎng)站，這兩個(gè)網(wǎng)站的 SessionStorage 是共享的嗎？

答案：當(dāng)然是不能共享的。不明白的話仔細(xì)閱讀第二段話。

2. 當(dāng)我們重新刷新一個(gè)頁面那么?SessionStorage 中的數(shù)據(jù)會(huì)消失嗎？

答案：當(dāng)然還是不會(huì)，即使你使用的是強(qiáng)制刷新仍舊不會(huì)使?SessionStorage 數(shù)據(jù)消失，即?SessionStorage 里面的數(shù)據(jù)只會(huì)在當(dāng)前活動(dòng)的標(biāo)簽頁中關(guān)閉掉之后才會(huì)消失。

3. 瀏覽器刷新到底做了什么？

瀏覽器刷新做的只是重新加載網(wǎng)頁數(shù)據(jù)【強(qiáng)制刷新的區(qū)別只是不使用瀏覽器緩存下來的HTML、JS數(shù)據(jù)，所有本頁面用到的HTML、JS都需要重新向服務(wù)器獲取】，并重新解析生成 DOM 樹，當(dāng)然還同時(shí)會(huì)重新解釋執(zhí)行?JavaScript 代碼，之后重新繪制頁面，注冊綁定事件，之前頁面在活動(dòng)的時(shí)候?qū)?JavaScript 變量做的數(shù)據(jù)賦值數(shù)據(jù)都會(huì)消失。

PS：個(gè)人在使用前后端完全分離的開發(fā)的模式的情況下，更喜歡使用 SessionStorage 和 LocalStorage 來進(jìn)行數(shù)據(jù)存儲。感覺這兩種存儲方式非常適合 SPA 這種開發(fā)模式。

總結(jié)

以上是生活随笔為你收集整理的SessionStorage 和 LocalStorage 生命周期 以及 浏览器刷新操作意味着什么？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。