1. sessionStorage 的特點(diǎn)

• 作用域：

  • sessionStorage 的作用域限定在當(dāng)前頁面會話中。

  • 不同標(biāo)簽頁或窗口之間的 sessionStorage 是隔離的，即使它們打開的是同一個(gè)頁面。

• 生命周期：

  • 數(shù)據(jù)在頁面會話期間有效。

  • 當(dāng)頁面會話結(jié)束（關(guān)閉標(biāo)簽頁或窗口）時(shí)，數(shù)據(jù)會被清除。

• 存儲容量：

  • 通常每個(gè)源的 sessionStorage 容量限制為 5MB（不同瀏覽器可能略有不同）。

• 數(shù)據(jù)類型：

  • 只能存儲字符串類型的數(shù)據(jù)。如果需要存儲對象或其他數(shù)據(jù)類型，需要先將其轉(zhuǎn)換為字符串（如使用 JSON.stringify）。

2. sessionStorage 的存儲機(jī)制

瀏覽器通過以下方式存儲和管理 sessionStorage 數(shù)據(jù)：

2.1 基于源的隔離

• sessionStorage 是基于 源（Origin） 隔離的。

• 源 由協(xié)議（http/https）、域名和端口組成。例如：

  • https://example.com 和 http://example.com 是不同的源。

  • https://example.com 和 https://www.example.com 也是不同的源。

• 不同源之間的 sessionStorage 數(shù)據(jù)是隔離的，無法互相訪問。

2.2 頁面會話的綁定

• sessionStorage 與當(dāng)前頁面會話綁定。

• 當(dāng)用戶打開一個(gè)新標(biāo)簽頁或窗口時(shí)，即使訪問的是同一個(gè) URL，也會創(chuàng)建一個(gè)新的 sessionStorage 實(shí)例。

• 刷新頁面不會清除 sessionStorage 數(shù)據(jù)。

2.3 數(shù)據(jù)存儲位置

• sessionStorage 的數(shù)據(jù)存儲在瀏覽器的內(nèi)存中。

• 數(shù)據(jù)不會持久化到磁盤，因此當(dāng)頁面會話結(jié)束時(shí)，數(shù)據(jù)會被清除。

3. sessionStorage 的 API

sessionStorage 提供了以下方法用于操作數(shù)據(jù)：

3.1 存儲數(shù)據(jù)

sessionStorage.setItem('key', 'value');

• 將數(shù)據(jù)存儲到 sessionStorage 中。

• 如果鍵已存在，則會覆蓋原有的值。

3.2 獲取數(shù)據(jù)

const value = sessionStorage.getItem('key');

• 從 sessionStorage 中獲取指定鍵對應(yīng)的值。

• 如果鍵不存在，則返回 null。

3.3 刪除數(shù)據(jù)

sessionStorage.removeItem('key');

• 從 sessionStorage 中刪除指定鍵及其對應(yīng)的值。

3.4 清空數(shù)據(jù)

sessionStorage.clear();

• 清空 sessionStorage 中的所有數(shù)據(jù)。

3.5 獲取鍵名

const key = sessionStorage.key(index);

• 獲取指定索引位置的鍵名。

3.6 獲取長度

const length = sessionStorage.length;

• 獲取 sessionStorage 中存儲的鍵值對數(shù)量。

4. sessionStorage 的使用示例

4.1 存儲和獲取數(shù)據(jù)

// 存儲數(shù)據(jù)
sessionStorage.setItem('username', 'Alice');
sessionStorage.setItem('theme', 'dark');

// 獲取數(shù)據(jù)
const username = sessionStorage.getItem('username');
console.log(username); // 輸出: Alice

// 獲取不存在的鍵
const nonExistent = sessionStorage.getItem('nonExistent');
console.log(nonExistent); // 輸出: null

4.2 刪除數(shù)據(jù)

// 刪除指定鍵
sessionStorage.removeItem('theme');

// 檢查是否刪除成功
const theme = sessionStorage.getItem('theme');
console.log(theme); // 輸出: null

4.3 清空數(shù)據(jù)

// 清空所有數(shù)據(jù)
sessionStorage.clear();

// 檢查是否清空成功
console.log(sessionStorage.length); // 輸出: 0

4.4 遍歷數(shù)據(jù)

// 存儲數(shù)據(jù)
sessionStorage.setItem('key1', 'value1');
sessionStorage.setItem('key2', 'value2');

// 遍歷所有鍵值對
for (let i = 0; i < sessionStorage.length; i++) {
    const key = sessionStorage.key(i);
    const value = sessionStorage.getItem(key);
    console.log(`${key}: ${value}`);
}
// 輸出:
// key1: value1
// key2: value2

5. sessionStorage 的注意事項(xiàng)

• 數(shù)據(jù)丟失：

  • 當(dāng)頁面會話結(jié)束時(shí)（關(guān)閉標(biāo)簽頁或窗口），sessionStorage 中的數(shù)據(jù)會被清除。

  • 刷新頁面不會清除數(shù)據(jù)。

• 數(shù)據(jù)類型限制：

  • sessionStorage 只能存儲字符串。如果需要存儲對象或其他數(shù)據(jù)類型，需要先將其轉(zhuǎn)換為字符串（如使用 JSON.stringify）。

• 容量限制：

  • 每個(gè)源的 sessionStorage 容量通常限制為 5MB。如果超出限制，瀏覽器可能會拋出錯(cuò)誤。

• 安全性：

  • sessionStorage 的數(shù)據(jù)僅在客戶端存儲，不會自動(dòng)發(fā)送到服務(wù)器。

  • 不要將敏感信息（如密碼、令牌）存儲在 sessionStorage 中，除非經(jīng)過加密處理。

6. sessionStorage 與 localStorage 的區(qū)別

總結(jié)

• sessionStorage 是一種基于頁面會話的客戶端存儲機(jī)制，數(shù)據(jù)在頁面會話期間有效。

• 它的作用域限定在當(dāng)前頁面會話中，不同標(biāo)簽頁或窗口之間的數(shù)據(jù)是隔離的。

• 使用 sessionStorage 可以方便地存儲臨時(shí)數(shù)據(jù)，但需要注意其生命周期和容量限制。

• 與 localStorage 相比，sessionStorage 更適合存儲臨時(shí)數(shù)據(jù)，而 localStorage 更適合存儲持久化數(shù)據(jù)。

到此這篇關(guān)于javascript中sessionStorage的存儲機(jī)制的使用小結(jié)的文章就介紹到這了,更多相關(guān)javascript sessionStorage存儲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論