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

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

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

正文

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

引用 MDN 中對 sessionStorage 和 localStorage 的解釋

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

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

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

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

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

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

創(chuàng)建一個 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)建一個會話存儲，添加一個按鈕，點(diǎn)擊打開同源頁面2，在頁面2中根據(jù) key 獲取值。

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

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

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

這番操作好像兩個頁面能共享數(shù)據(jù)哈，不行，還得驗(yàn)證下，在頁面1中更改下數(shù)據(jù)，再新增一條sessionStorage 數(shù)據(jù)，頁面2中獲取對應(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)簽或窗口打開一個頁面時會復(fù)制頂級瀏覽會話的上下文作為新會話的上下文，原來如此，只有在頁面中以窗口或標(biāo)簽打開的同源頁面才會作為副本 “暫時共享” 原頁面的sessionStorage，數(shù)據(jù)變化互不影響。

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

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

相關(guān)文章

最新評論