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

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

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

localStorage

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

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

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


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

sessionStorage

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

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

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


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

特殊場景 window.open

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


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

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

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


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


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


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

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

總結(jié)

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

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

作者：一牙西瓜

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

來源：稀土掘金

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