sessionStorage多Tab標(biāo)簽頁數(shù)據(jù)共享問題分析
問題描述
在 A 頁面設(shè)置一些 sessionStorage 數(shù)據(jù)，然后 a 標(biāo)簽 _blank 方式打開另一個(gè) tab B 頁面，發(fā)現(xiàn) B 頁面有A 頁面的 sessionStorage 數(shù)據(jù)。
問題原因
不同 tab 頁面 sessionStorage 數(shù)據(jù)出現(xiàn)了 “共享”。
sessionStorage
為什么會共享呢？下面看下 sessionStorage 的官方 MDN 介紹：
- 頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會保持原來的頁面會話。
- 在新標(biāo)簽或窗口打開一個(gè)頁面時(shí)會復(fù)制頂級瀏覽會話的上下文作為新會話的上下文，這點(diǎn)和 session cookie 的運(yùn)行方式不同。
- 打開多個(gè)相同的 URL 的 Tabs 頁面，會創(chuàng)建各自的
sessionStorage。 - 關(guān)閉對應(yīng)瀏覽器標(biāo)簽或窗口，會清除對應(yīng)的
sessionStorage。
- 存儲在 sessionStorage 中的數(shù)據(jù)特定于頁面的協(xié)議。意思就是：
http://example.com與https://example.com的 sessionStorage 相互隔離。 - 被存儲的鍵值對總是以 UTF-16 DOMString 的格式所存儲，其使用兩個(gè)字節(jié)來表示一個(gè)字符。對于對象、整數(shù) key 值會自動(dòng)轉(zhuǎn)換成字符串形式。
根據(jù)第二點(diǎn)
簡單嘗試后發(fā)現(xiàn)
- 通過新建標(biāo)簽頁打開相同的頁面（屬于第三條）創(chuàng)建獨(dú)立 sessionStorage。
- 通過 window.open 打開新標(biāo)簽頁，共享了原 tab 頁中的 sessionStorage。
- 通過 a 標(biāo)簽 _blank 方式打開新 tab 頁，Chrome 86 瀏覽器共享了 sessionStorage，Chrome 113 和 Firefox 瀏覽器并沒有共享。
所以對于 a 標(biāo)簽打開的頁面，是否“共享”sessionStorage 屬于瀏覽器兼容性問題。
在 Chrome 89 版本前，a 標(biāo)簽跳轉(zhuǎn)會共享 sessionStorage。而在 2021年 3月 Chrome 89 版本后，通過 a 標(biāo)簽 target="_blank" 跳轉(zhuǎn)到新頁面時(shí) sessionStorage 就會丟失。
應(yīng)該稱為“復(fù)制”而不是“共享”
在 A 頁面設(shè)置一些 sessionStorage 數(shù)據(jù)，然后 a 標(biāo)簽 _blank 方式打開另一個(gè) tab B 頁面，發(fā)現(xiàn) B 頁面有A 頁面的 sessionStorage 數(shù)據(jù)。此時(shí)兩個(gè)頁面的sessionStorage相互獨(dú)立，修改不會影響對方，所以稱為復(fù)制更為準(zhǔn)確。
以上就是sessionStorage 多 Tab 標(biāo)簽頁數(shù)據(jù)“共享”的詳細(xì)內(nèi)容，更多關(guān)于sessionStorage 多 Tab 標(biāo)簽頁數(shù)據(jù)“共享”的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Express框架view對象使用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要給大家分享的是TypeScript 索引簽名的理解，索引簽名由方括號中的索引名稱及其類型組成，后面是冒號和值類型：{ [indexName: KeyType]: ValueType }， KeyType 可以是一個(gè) string、number 或 symbol，而ValueType 可以是任何類型，下面就倆簡單了解一下吧2021-10-10
這篇文章主要介紹如何用JS寫一個(gè)發(fā)布訂閱模式，什么是發(fā)布訂閱模式？能手寫實(shí)現(xiàn)一下嗎？它和觀察者模式有區(qū)別嗎？帶著疑惑一起解開下面文章的內(nèi)容吧2021-11-11
微信小程序報(bào)錯(cuò)：this.setData is not a function的解決辦法
這篇文章主要介紹了微信小程序報(bào)錯(cuò)：this.setData is not a function的解決辦法的相關(guān)資料,希望通過本文能幫助到大家解決這樣類似的問題，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了深入理解函數(shù)執(zhí)行上下文 this示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了微信小程序 下拉菜單的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了原生JS以后也支持類型注解意義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
用javascript制作qq注冊動(dòng)態(tài)頁面
這篇文章主要介紹了用javascript制作qq注冊動(dòng)態(tài)頁面,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下2021-04-04
使用preload預(yù)加載頁面資源時(shí)注意事項(xiàng)
本文主要介紹 preload 的使用，以及與 prefetch 的區(qū)別。然后會聊聊瀏覽器的加載優(yōu)先級，大家一定要認(rèn)真看完2020-02-02
微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法
這篇文章主要介紹了 微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法的相關(guān)資料,希望大家通過本文能實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09