偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

SessionStorage 如何在多個 tab 間共享數(shù)據(jù)?

開發(fā) 前端
sessionStorage 確實(shí)無法在多個窗口或標(biāo)簽之間共享數(shù)據(jù)。但是當(dāng)通過 window.open 或鏈接打開新頁面時,新頁面將復(fù)制前一頁面的 sessionStorage,以此來完成數(shù)據(jù)共享!?

Hello,大家好,我是 Sunday。

過了臘八就是年,Sunday 提前祝大家新年快樂,2025 暴富暴富暴富!

我們知道 SessionStorage 是不可以在多個 tab 之間共享數(shù)據(jù)的。但是一個同學(xué)在面試的時候,卻被面試官問到:“SessionStorage 如何在多個 tab 間共享數(shù)據(jù)?” 注意: 他并沒有問能不能,而是問的 如何? 那么是他問錯了嗎?恐怕不是的~~

面試流程回顧

我聽了這位同學(xué)的面試錄音整個流程是由三個問題組成的:

問題一:localStorage和sessionStorage有什么區(qū)別?

  • localStorage的數(shù)據(jù)是持久化的,只要我們不主動清除它,它就會一直存在。
  • 而 sessionStorage 會隨著選項(xiàng)卡/窗口的關(guān)閉,結(jié)束會話并清除存儲的數(shù)據(jù)。

問題二:同域下localStorage可以共享數(shù)據(jù)嗎?

當(dāng)然可以。我們可以直接通過簡單的代碼來驗(yàn)證這個問題:

// 在一個網(wǎng)頁中保存數(shù)據(jù)
localStorage.setItem('name', '張三')
// 從另一個同域的網(wǎng)站中可以直接獲取
localStorage.getItem('name') // 張三

問題三:那么 sessionStorage 可以在多個 tab 間共享數(shù)據(jù)嗎?

重頭戲來了!

這位同學(xué)回答的是:“不可以!” 每個窗口或選項(xiàng)卡都有一個單獨(dú)的 sessionStorage,它們之間沒有數(shù)據(jù)共享!

但是你確定嗎?

如何實(shí)現(xiàn) sessionStorage 數(shù)據(jù)共享

我們先看下 mdn 中對 sessionStorage 的介紹:

圖片圖片

根據(jù) mdn 的描述我們可以清楚的看到,打開多個相同的 URL 的 Tabs 頁面,會創(chuàng)建各自的 sessionStorage 也就是說 不可共享。

所以,我們來做一個實(shí)驗(yàn):

  1. 我們創(chuàng)建兩個 html 文件,分別為 test.html  和  test02.html
// test.html
<body>
  <button id="btn">點(diǎn)我</button>

  <script>
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', () => {
      window.sessionStorage.setItem('name', '張三')
      window.open('http://127.0.0.1:5500/test02.html')
    })
  </script>
</body>
// test02.html
<body>
  <div id="name"></div>

  <script>
    const nameEle = document.querySelector('#name')
    nameEle.innerHTML = window.sessionStorage.getItem('name')
  </script>
</body>

兩塊代碼并不復(fù)雜,在 test 中我們保存了 name 到 sessionStorage 同時打開了 test02.html ,并且 保證他們是同域的,然后再 test02 中,輸出了保存的 name(注意: 以上代碼需要運(yùn)行在服務(wù)上)。

執(zhí)行以上代碼之后,可以發(fā)現(xiàn)在 test02 中 成功 的打印出了保存的數(shù)據(jù) 張三!

分析原因

那么以上實(shí)驗(yàn)證明 sessionStorage 似乎可以共享數(shù)據(jù)。難道 mdn 上說的是錯誤的嗎?當(dāng)然不是。

以下是結(jié)論:

sessionStorage 確實(shí)無法在多個窗口或標(biāo)簽之間共享數(shù)據(jù)。但是當(dāng)通過 window.open 或鏈接打開新頁面時,新頁面將復(fù)制前一頁面的 sessionStorage,以此來完成數(shù)據(jù)共享!


責(zé)任編輯:武曉燕 來源: 程序員Sunday
相關(guān)推薦

2023-07-11 16:01:47

共享數(shù)據(jù)開發(fā)

2024-12-26 10:28:44

2011-06-30 17:21:56

Qt 線程 共享

2019-07-08 08:59:41

Docker容器主機(jī)

2020-02-24 13:06:55

Python數(shù)據(jù)幀開發(fā)

2011-03-24 17:28:58

網(wǎng)絡(luò)數(shù)據(jù)庫

2022-03-07 05:40:34

桌面LinuxKDE Plasma

2018-05-04 08:57:00

LinuxWindows共享文件

2018-06-26 08:55:35

LinuxWindows共享文件

2019-07-10 09:30:49

Windows 10WindowsAlt + Tab

2022-05-03 10:08:53

WindowsLinux文件共享

2018-08-27 10:24:03

UbuntuPHP版本

2018-05-04 09:32:32

Linux快速監(jiān)控rwho

2015-10-15 10:24:01

數(shù)據(jù)Laravel 5

2017-04-19 22:00:40

UbuntuLinux Mint桌面共享

2017-02-10 20:00:17

Linux共享目錄命令

2024-01-30 15:29:20

Django數(shù)據(jù)庫Python

2017-02-16 08:13:17

2020-08-10 08:28:19

ZeroMQCPython

2011-08-01 16:41:05

ibmdwCloudBurst配置網(wǎng)絡(luò)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號