sessionStorage 與 localStorage 相似,但存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。
- 頁面會話在瀏覽器打開期間一直保持,並且重新加載或恢復頁面仍會保持原來的頁面會話。
- 在新標簽或窗口打開一個頁面時會復制頂級瀏覽會話的上下文作為新會話的上下文,這點和 session cookies 的運行方式不同。
- 打開多個相同的URL的Tabs頁面,會創建各自的sessionStorage。
- 關閉對應瀏覽器窗口(Window)/ tab,會清除對應的sessionStorage。
以上摘自 Mozilla Window.sessionStorage
1、3、4 不難理解。
-
當把數據存儲在 sessionStorage 對象中后,刷新頁面重新加載,原來的 sessionStorage 不會改變也不會丟失。
-
打開多個相同的 URL 的 Tabs 頁面時,即域名和端口一樣,會創建各自的 sessionStorage,也就是說,新開一個相同 URL 的 Tabs 頁面時,sessionStorage 為空,和原來頁面不共享。
-
關閉標簽頁時, sessionStorage 會被清除,重新打開這個頁面之前的 sessionStorage 就不在了。
第 2 點如何理解呢?會復制頂級瀏覽會話的上下文作為新會話的上下文
我做了如下測試:
- 在
http://localhost:4019/#/answer
智能問答前台頁面 A 請求一些數據,並存在了 sessionStorage 中:
- 從
http://localhost:4019/#/answer
頁面 A 跳轉到后台管理系統http://localhost:4020/#/document/list
頁面 B,這時在 http://localhost:4020 下沒有 sessionStorage:
這不難理解,因為這是新開的頁面。
- 從
http://localhost:4020/#/document/list
頁面 B 通過<a target="_blank" />
跳轉到智能問答前台http://localhost:4019/#/answer
C 頁面后,C 頁面的 sessionStorage 同 A 相同。
這時候,A 和 C 域名(ip)和端口相同,但是從其他頁面跳轉的,並且新開了一個頁面。這就是 復制頂級瀏覽會話的上下文作為新會話的上下文
另一方面,當我在 A 頁面繼續請求數據改變 sessionStorage 時,C 頁面的 sessionStorage 並沒有跟隨改變,改變 C 的 sessionStorage, A 頁面也沒有改變。證明他們時獨立不共享的。
其實,從 A 頁面直接通過 <a target="_blank" />
跳轉到 C 頁面,也是一樣的效果。
總結一下:
1. 當使用 <a target="_blank" />
, window.location.href
,window.open
打開新的頁面時,新頁面會復制之前同地址頁面的 sessionStorage
2. 盡管兩個頁面 sessionStorage 相同,但它們是相互獨立的,不會改變對方