1.使用場景

   sessionStorage 是 Web Storage API 提供的一種客戶端存儲機(jī)制，用于在瀏覽器中保存會話級別（session-level）的數(shù)據(jù)。與 localStorage 不同，sessionStorage 中存儲的數(shù)據(jù)在用戶關(guān)閉標(biāo)簽頁或?yàn)g覽器窗口時會被清除。

2.使用方法

使用 sessionStorage 對象來存儲鍵值對數(shù)據(jù)，并在當(dāng)前會話期間訪問這些數(shù)據(jù)。以下是一些常見的 sessionStorage 方法：

• sessionStorage.setItem(key, value): 將鍵值對數(shù)據(jù)存儲到會話存儲中。
• sessionStorage.getItem(key): 獲取指定鍵對應(yīng)的值。
• sessionStorage.removeItem(key): 從會話存儲中移除指定鍵及其對應(yīng)的值。
• sessionStorage.clear(): 清空會話存儲中的所有數(shù)據(jù)。

3.示例 

// 將數(shù)據(jù)存儲到會話存儲中
sessionStorage.setItem('username', 'johnDoe');

// 從會話存儲中獲取特定鍵對應(yīng)的值
const username = sessionStorage.getItem('username');
console.log(username); // 輸出 'johnDoe'

// 從會話存儲中移除指定鍵及其對應(yīng)的值
sessionStorage.removeItem('username');

// 清空會話存儲中的所有數(shù)據(jù)
sessionStorage.clear();

需要注意的是，sessionStorage 中存儲的數(shù)據(jù)僅在當(dāng)前會話期間有效。如果用戶關(guān)閉標(biāo)簽頁或?yàn)g覽器窗口，這些數(shù)據(jù)將被清除。

sessionStorage.setItem與sessionStorage.getItem

sessionStorage.getItem 是 Web Storage API 中的一種方法，用于從會話存儲中獲取特定鍵對應(yīng)的值。會話存儲（session storage）是瀏覽器提供的一種存儲機(jī)制，可以在當(dāng)前會話期間（即在同一個標(biāo)簽頁或窗口打開的情況下）保存數(shù)據(jù)。

// 將數(shù)據(jù)存儲到會話存儲中
sessionStorage.setItem('username', 'johnDoe');

// 從會話存儲中獲取特定鍵對應(yīng)的值
const username = sessionStorage.getItem('username');
console.log(username); // 輸出 'johnDoe'

使用 sessionStorage.setItem 方法將鍵為 'username' 的值設(shè)置為 'johnDoe'。然后使用 sessionStorage.getItem 方法來獲取鍵為 'username' 的值，并將其賦給變量 username。

附：js中session、cookie、 localStorage和SessionStorage的區(qū)別和特點(diǎn)

1. 生命周期：

   - Session：session 存儲在服務(wù)器端，通常使用會話標(biāo)識符（session ID）來識別用戶會話。session 數(shù)據(jù)隨著會話的結(jié)束而銷毀，或者在一段時間的不活動后過期。

   - Cookie：cookie 存儲在客戶端，可以設(shè)置存儲時間。可以通過設(shè)置過期時間來控制 cookie 的生命周期。

   - localStorage：localStorage 數(shù)據(jù)持久化存儲在客戶端，除非手動清除，否則會一直保存。

   - sessionStorage：sessionStorage 數(shù)據(jù)僅在當(dāng)前會話期間有效，關(guān)閉瀏覽器標(biāo)簽頁或窗口后會被銷毀。

2. 存儲容量：

   - Session 和 cookie：一般情況下，服務(wù)器可以設(shè)置 session 存儲容量的大小，cookie 的存儲容量受瀏覽器限制，一般為 4KB 左右。

   - localStorage 和 sessionStorage：它們有更大的存儲容量，一般為 5MB 左右。

3. 數(shù)據(jù)發(fā)送：

   - Session：session 數(shù)據(jù)存儲在服務(wù)器上，每次請求時都會將 session ID 發(fā)送到服務(wù)器。服務(wù)器根據(jù) session ID 來獲取對應(yīng)的 session 數(shù)據(jù)。

   - Cookie：cookie 數(shù)據(jù)會在每次 HTTP 請求時自動發(fā)送到服務(wù)器，可以通過設(shè)置 domain 和 path 控制 cookie 在哪些請求中發(fā)送。

   - localStorage 和 sessionStorage：數(shù)據(jù)僅在客戶端存儲，不會自動發(fā)送到服務(wù)器。

4. 訪問權(quán)限：

   - Session、cookie、localStorage 和 sessionStorage 都是在瀏覽器中存儲的，因此可以通過 JavaScript 在客戶端訪問和操作這些存儲機(jī)制。

總體來說，session 適用于需要在服務(wù)器端存儲用戶相關(guān)數(shù)據(jù)的情況，而 cookie 適用于需要在客戶端存儲少量簡單數(shù)據(jù)的情況。localStorage 和 sessionStorage 則適用于需要在客戶端持久化存儲大量數(shù)據(jù)的情況，但它們僅在客戶端存儲，不涉及與服務(wù)器的數(shù)據(jù)交互。根據(jù)具體的需求和場景，選擇合適的存儲機(jī)制。

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

最新評論