SessionStorage?和 LocalStorage 的辨析

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

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

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

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

自己之前的幾個疑問？

1. 那么使用瀏覽器打開兩個同樣的網站，這兩個網站的 SessionStorage 是共享的嗎？

答案：當然是不能共享的。不明白的話仔細閱讀第二段話。

2. 當我們重新刷新一個頁面那么?SessionStorage 中的數據會消失嗎？

答案：當然還是不會，即使你使用的是強制刷新仍舊不會使?SessionStorage 數據消失，即?SessionStorage 里面的數據只會在當前活動的標簽頁中關閉掉之后才會消失。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。