欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年02月08日 11:24:23   作者：黑夜丶vn  
這篇文章主要為大家介紹了sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

摸魚(yú)之余，偶然看到一則關(guān)于sessionStorage 存儲(chǔ)相關(guān)的問(wè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ū)域在頁(yè)面會(huì)話期間可用（即只要瀏覽器處于打開(kāi)狀態(tài)，包括頁(yè)面重新加載和恢復(fù)）。

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

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

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

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

描述中的一個(gè)詞吸引了my eyes，復(fù)制，難道說(shuō)？趕緊驗(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">打開(kāi)同源頁(yè)面</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>

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

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

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

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

這番操作好像兩個(gè)頁(yè)面能共享數(shù)據(jù)哈，不行，還得驗(yàn)證下，在頁(yè)面1中更改下數(shù)據(jù)，再新增一條sessionStorage 數(shù)據(jù)，頁(yè)面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？頁(yè)面2的緩存和頁(yè)面1不一樣了，回顧第二條描述：在新標(biāo)簽或窗口打開(kāi)一個(gè)頁(yè)面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話的上下文作為新會(huì)話的上下文，原來(lái)如此，只有在頁(yè)面中以窗口或標(biāo)簽打開(kāi)的同源頁(yè)面才會(huì)作為副本 “暫時(shí)共享” 原頁(yè)面的sessionStorage，數(shù)據(jù)變化互不影響。

所以說(shuō)：多窗口之間 sessionStorage 不可以共享狀態(tài)，但是在某些場(chǎng)景下新開(kāi)的頁(yè)面會(huì)復(fù)制之前頁(yè)面的 sessionStorage，相互之間無(wú)關(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)文章！

相關(guān)文章

最新評(píng)論