sessionStorage 另開分頁資料一定會重置嗎?
2024-10-15 21:39:37
每次準備面試題的時候,一定會準備的經典問題就是關於 sessionStorage & localStorage 兩者之間的差異,尤其他們名字很像真的很容易搞混!
但相信聰明的大家都記得他們的差異 :
* localStorage 除非手動清除不然會永久存在
* sessionStorage 只要關閉分頁就會清除,然後每次開新分頁都會建立新的sessionStorage
但凡事都有個例外,回到我們今天的標題,sessionStorage 另開分頁資料一定會重置嗎 ? 答案是不一定。
---
如果你從原分頁中導航到 **同源** 的另一個頁面,在這種情況下,原分頁的 sessionStorage 會被 **複製** 到新分頁中,但這是一次性的複製,並不會持續同步。
換句話說,你在新分頁更改 sessionStorage 裡面的資料,並不會影響到舊分頁的 sessionStorage。
有以下幾種方法可以實作上面提到的複製行為 (前提是另開的分頁要是同源的 !!! ) :
1. `window.open()`
如果有在第三個參數加上 `noopener=true`,則另開分頁時 sessionStorage 資料不會被複製過去。
2. HTML 的 a 標籤
因為安全因素,在 2021 年之後,使用 `target="_blank"` 設定另開分頁時,會預設 `rel="noopener"`,所以如果想要測試另開分頁資料複製的行為,可以手動設定 `rel="opener"`,一樣可以拿到和原分頁一樣的 sessionStorage 資料。
3. 直接在該分頁標籤點擊右鍵選擇複製分頁
注意 ! 若是直接在網址列輸入同樣的 URL,因為是直接新開一個分頁,不是從原有的頁面去執行另開分頁的動作,所以並不會有複製行為。
---
上面提到的 `window.open()` 以及 a 標籤另開分頁的方法,我有建立一個測試頁面,把會複製跟不會複製的寫法都有分別列出來,歡迎大家玩看看~
如果網址不能用也歡迎留言告訴我。
https://jsfiddle.net/yccheng/abts75ok/14/
---
補充說明一 : 什麼是同源 ?
兩個網頁被認為是同源的,必須滿足以下三個條件:
* Scheme:例如 HTTP 或 HTTPS。
* Hostname:例如 www.example.com。
* Port:例如 80 或 443。
只有當這三個條件完全相同時,這兩個網頁才被視為同源。例如:
* `http://www.example.com/page1` 和 `http://www.example.com/page2` 是同源的。
* `http://www.example.com` 和 `https://www.example.com` 不是同源的,因為 Scheme 不同。
* `http://www.example.com:80` 和 `http://www.example.com:8080` 也不是同源的,因為 Port 不同。
---
補充說明二 : window.opener 的安全性問題
當使用 `window.open()` 或使用 a 標籤且設定 `opener` 參數來打開子分頁時,就可以使用 `window.opener` 這個 web API 對父分頁進行一些操作。
使用 `window.opener` 可能會引發安全問題,特別是當子分頁來自不受信任的來源時。攻擊者可以利用 `window.opener` 修改父分頁的內容,為了防止這種情況,建議搭配 `noopener` 參數使用。
---
參考資料 :
* https://github.com/lmk123/blog/issues/66
* https://juejin.cn/post/6979038859254300703
* https://blog.huli.tw/2020/09/05/session-storage-and-html-spec-and-noopener/
* 最後感謝 chatgpt、claude、felo 這幾個 AI 工具幫我整理部分資料。
[文章也同步分享在 Medium。](https://medium.com/@HeronCheng/sessionstorage-%E5%8F%A6%E9%96%8B%E5%88%86%E9%A0%81%E8%B3%87%E6%96%99%E4%B8%80%E5%AE%9A%E6%9C%83%E9%87%8D%E7%BD%AE%E5%97%8E-723d7f5a4724)
點擊複製文章連結
X