背景：項目接手維護中，有一次測試提了一個bug：開啟了兩個 tab，在 Atab 中完成業務操作，在 Btab 中做返回操作，但 Btab 中報錯了。

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

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

localStorage

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

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

// 在標簽頁A中設置數據
localStorage.setItem('username', 'Alice');


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

sessionStorage

生命周期: sessionStorage 中存儲的數據只在頁面會話期間有效。當用戶關閉標簽頁或瀏覽器時，數據會被清除。即使重新加載或恢復頁面，數據也會保持存在，直到標簽頁或瀏覽器被關閉。

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

// 在標簽頁A中設置數據
sessionStorage.setItem('username', 'Alice');


// 在標簽頁B中讀取數據
const username = sessionStorage.getItem('username');
console.log(username);  // 輸出: null (因為 sessionStorage 不共享數據)

特殊場景 window.open

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


// 在標簽頁B中讀取數據
const username = sessionStorage.getItem('username');
console.log(username);  // 輸出: Alice (因為 新頁面會復制前一頁的 sessionStorage )

新開的頁面會復制前一頁的sessionStorage，但在不同的 tab 數據是獨立的。

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


// 在標簽頁B中讀取數據
const username = sessionStorage.getItem('username');
console.log(username);  // 輸出: Alice (因為 新頁面會復制前一頁的?sessionStorage )


// 在標簽頁B中重新 set 數據
sessionStorage.setItem('username', 'AliceB');


// 在標簽頁A中讀取數據
sessionStorage.getItem('username'); // 輸出：Alice(因為 不同的 tab 數據是獨立的 )

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

總結

localStorage: 可以在同一瀏覽器的多個標簽頁之間共享數據，只要這些標簽頁屬于 同一個源。

sessionStorage: 不能在不同的標簽頁或窗口之間共享數據，即使它們屬于同一個源。

作者：一牙西瓜

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

來源：稀土掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。