1.使用場(chǎng)景

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

2.使用方法

使用 sessionStorage 對(duì)象來(lái)存儲(chǔ)鍵值對(duì)數(shù)據(jù)，并在當(dāng)前會(huì)話期間訪問(wèn)這些數(shù)據(jù)。以下是一些常見(jiàn)的 sessionStorage 方法：

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

3.示例 

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

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

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

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

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

sessionStorage.setItem與sessionStorage.getItem

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

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

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

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

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

1. 生命周期：

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

   - Cookie：cookie 存儲(chǔ)在客戶端，可以設(shè)置存儲(chǔ)時(shí)間?？梢酝ㄟ^(guò)設(shè)置過(guò)期時(shí)間來(lái)控制 cookie 的生命周期。

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

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

2. 存儲(chǔ)容量：

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

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

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

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

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

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

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

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

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

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

最新評(píng)論