背景：項(xiàng)目接手維護(hù)中，有一次測(cè)試提了一個(gè)bug：開(kāi)啟了兩個(gè) tab，在 Atab 中完成業(yè)務(wù)操作，在 Btab 中做返回操作，但 Btab 中報(bào)錯(cuò)了。

排查：找到返回操作的代碼，發(fā)現(xiàn)是調(diào)用了window.sessionStorage.getItem('xxx')來(lái)獲取數(shù)據(jù)，使用console.log打印輸出是null。

localStorage 和 sessionStorage 都是由瀏覽器提供的 Web 存儲(chǔ)機(jī)制，用于在客戶端存儲(chǔ)數(shù)據(jù)，但它們?cè)跀?shù)據(jù)的生命周期和作用范圍上有所不同。

localStorage

生命周期: localStorage 中存儲(chǔ)的數(shù)據(jù)是持久的，即使用戶關(guān)閉瀏覽器或重新啟動(dòng)計(jì)算機(jī)，數(shù)據(jù)仍然存在，直到明確地被刪除。

作用范圍: localStorage 在同一瀏覽器的同一個(gè)源（域名、協(xié)議和端口）之間共享。因此，如果你在一個(gè)標(biāo)簽頁(yè)中設(shè)置了 localStorage 的數(shù)據(jù)，其他標(biāo)簽頁(yè)在同一源下也能訪問(wèn)到這些數(shù)據(jù)。

// 在標(biāo)簽頁(yè)A中設(shè)置數(shù)據(jù)
localStorage.setItem('username', 'Alice');


// 在標(biāo)簽頁(yè)B中讀取數(shù)據(jù)
const username = localStorage.getItem('username');
console.log(username);  // 輸出: 'Alice'

sessionStorage

生命周期: sessionStorage 中存儲(chǔ)的數(shù)據(jù)只在頁(yè)面會(huì)話期間有效。當(dāng)用戶關(guān)閉標(biāo)簽頁(yè)或?yàn)g覽器時(shí)，數(shù)據(jù)會(huì)被清除。即使重新加載或恢復(fù)頁(yè)面，數(shù)據(jù)也會(huì)保持存在，直到標(biāo)簽頁(yè)或?yàn)g覽器被關(guān)閉。

作用范圍: sessionStorage 的作用范圍是單個(gè)標(biāo)簽頁(yè)或窗口。它不能在不同的標(biāo)簽頁(yè)或窗口之間共享數(shù)據(jù)，即使它們屬于同一個(gè)源。

// 在標(biāo)簽頁(yè)A中設(shè)置數(shù)據(jù)
sessionStorage.setItem('username', 'Alice');


// 在標(biāo)簽頁(yè)B中讀取數(shù)據(jù)
const username = sessionStorage.getItem('username');
console.log(username);  // 輸出: null (因?yàn)?sessionStorage 不共享數(shù)據(jù))

特殊場(chǎng)景 window.open

// 在標(biāo)簽頁(yè)A中設(shè)置數(shù)據(jù)
sessionStorage.setItem('username', 'Alice');
window.open('https://juejin.cn/post/7373226436570480655')


// 在標(biāo)簽頁(yè)B中讀取數(shù)據(jù)
const username = sessionStorage.getItem('username');
console.log(username);  // 輸出: Alice (因?yàn)?新頁(yè)面會(huì)復(fù)制前一頁(yè)的 sessionStorage )

新開(kāi)的頁(yè)面會(huì)復(fù)制前一頁(yè)的sessionStorage，但在不同的 tab 數(shù)據(jù)是獨(dú)立的。

// 在標(biāo)簽頁(yè)A中設(shè)置數(shù)據(jù)
sessionStorage.setItem('username', 'Alice');
window.open('https://juejin.cn/post/7373226436570480655')


// 在標(biāo)簽頁(yè)B中讀取數(shù)據(jù)
const username = sessionStorage.getItem('username');
console.log(username);  // 輸出: Alice (因?yàn)?新頁(yè)面會(huì)復(fù)制前一頁(yè)的?sessionStorage )


// 在標(biāo)簽頁(yè)B中重新 set 數(shù)據(jù)
sessionStorage.setItem('username', 'AliceB');


// 在標(biāo)簽頁(yè)A中讀取數(shù)據(jù)
sessionStorage.getItem('username'); // 輸出：Alice(因?yàn)?不同的 tab 數(shù)據(jù)是獨(dú)立的 )

在 Atab 里設(shè)置了username為 Alice，使用 window.open打開(kāi)了 Btab，在 Btab 中可以讀取到 username為 Alice，但在 Btab 里重新修改 username的值，Atab 里的值是不會(huì)被更改的

總結(jié)

localStorage: 可以在同一瀏覽器的多個(gè)標(biāo)簽頁(yè)之間共享數(shù)據(jù)，只要這些標(biāo)簽頁(yè)屬于 同一個(gè)源。

sessionStorage: 不能在不同的標(biāo)簽頁(yè)或窗口之間共享數(shù)據(jù)，即使它們屬于同一個(gè)源。

作者：一牙西瓜

鏈接：https://juejin.cn/post/7373473695056822298

來(lái)源：稀土掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。