快捷導(dǎo)航

sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析

更新時(shí)間：2023年02月08日 11:24:23 作者：黑夜丶vn

這篇文章主要為大家介紹了sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

摸魚之余，偶然看到一則關(guān)于sessionStorage 存儲(chǔ)相關(guān)的問題，腦海中迅速對(duì)該知識(shí)進(jìn)行回憶，看完之后發(fā)現(xiàn)還是有所漏之處，于是準(zhǔn)備再去查閱相關(guān)文檔一探究竟。

引用 MDN 中對(duì) sessionStorage 和 localStorage 的解釋

sessionStorage 為每一個(gè)給定的源（given origin）維持一個(gè)獨(dú)立的存儲(chǔ)區(qū)域，該存儲(chǔ)區(qū)域在頁面會(huì)話期間可用（即只要瀏覽器處于打開狀態(tài)，包括頁面重新加載和恢復(fù)）。

localStorage 同樣的功能，但是在瀏覽器關(guān)閉，然后重新打開數(shù)據(jù)仍然存在。

總結(jié)就是二者的區(qū)別在于數(shù)據(jù)的存儲(chǔ)周期。但是除了存儲(chǔ)周期不同，還有其他區(qū)別嗎？既然有數(shù)據(jù)存儲(chǔ)，就會(huì)有數(shù)據(jù)共享。localStorage 不用說，對(duì)于 sessionStorage 來說能否實(shí)現(xiàn)數(shù)據(jù)共享？在這篇文章之前我是認(rèn)為不能進(jìn)行數(shù)據(jù)共享的。

再去 MDN 中查找對(duì) sessionStorage api 的詳細(xì)描述：

頁面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會(huì)保持原來的會(huì)話；
在新標(biāo)簽或窗口打開一個(gè)頁面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話的上下文作為新會(huì)話的上下文，這點(diǎn)和session cookies 的運(yùn)行方式不同；
打開多個(gè)相同的 URL 的 Tabs 頁面，會(huì)創(chuàng)建各自的 sessionStorage；
關(guān)閉對(duì)應(yīng)瀏覽器或窗口，會(huì)清除對(duì)應(yīng)的 sessionStorage。

描述中的一個(gè)詞吸引了my eyes，復(fù)制，難道說？趕緊驗(yàn)證驗(yàn)證。

創(chuàng)建一個(gè) storage_index1.html 和 storage_index2.html：

<!-- storage_index1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <button class="btn">打開同源頁面</button>
</head>
<body>
<script>
    window.sessionStorage.setItem('sessionStorage_page1',11)
    let oBtn = document.querySelector('.btn')
    oBtn.onclick = function(){
       window.open("storage_index2.html")
    }
</script>
</body>
</html>

<!-- storage_index2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  console.log( window.sessionStorage.getItem('sessionStorage_page1') )
</script>
</body>
</html>

在頁面1中創(chuàng)建一個(gè)會(huì)話存儲(chǔ)，添加一個(gè)按鈕，點(diǎn)擊打開同源頁面2，在頁面2中根據(jù) key 獲取值。

action1：分別打開兩個(gè)頁面（頁面2不是通過按鈕打開的）

頁面2中獲取不到頁面1中的值，對(duì)于兩個(gè)頁面來說都是新開的會(huì)話，各自互不影響，所以頁面2無法獲取頁面1中的值。

action2：打開頁面1，從頁面1中點(diǎn)擊按鈕打開頁面2

這番操作好像兩個(gè)頁面能共享數(shù)據(jù)哈，不行，還得驗(yàn)證下，在頁面1中更改下數(shù)據(jù)，再新增一條sessionStorage 數(shù)據(jù)，頁面2中獲取對(duì)應(yīng)數(shù)據(jù)

    // storage_index1.html
    window.sessionStorage.setItem('sessionStorage_page1',22)
    window.sessionStorage.setItem('sessionStorage_page11',33)

    // storage_index2.html
    console.log( window.sessionStorage.getItem('sessionStorage_page1') )
    console.log( window.sessionStorage.getItem('sessionStorage_page11') )

what？頁面2的緩存和頁面1不一樣了，回顧第二條描述：在新標(biāo)簽或窗口打開一個(gè)頁面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話的上下文作為新會(huì)話的上下文，原來如此，只有在頁面中以窗口或標(biāo)簽打開的同源頁面才會(huì)作為副本 “暫時(shí)共享” 原頁面的sessionStorage，數(shù)據(jù)變化互不影響。

所以說：多窗口之間 sessionStorage 不可以共享狀態(tài)，但是在某些場景下新開的頁面會(huì)復(fù)制之前頁面的 sessionStorage，相互之間無關(guān)聯(lián)。

以上就是sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析的詳細(xì)內(nèi)容，更多關(guān)于sessionStorage存儲(chǔ)狀態(tài)共享的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: