一、sessionStorage

1、簡(jiǎn)介

sessionStorage用于在瀏覽器會(huì)話期間存儲(chǔ)數(shù)據(jù)，數(shù)據(jù)僅在當(dāng)前會(huì)話期間有效。
存儲(chǔ)的數(shù)據(jù)在用戶關(guān)閉瀏覽器標(biāo)簽頁(yè)或窗口后會(huì)被清除。

2、方法

• 使用sessionStorage.setItem(key, value)方法將數(shù)據(jù)存儲(chǔ)在sessionStorage中。
• 使用sessionStorage.getItem(key)方法根據(jù)鍵獲取存儲(chǔ)的值。
• 使用sessionStorage.removeItem(key)方法根據(jù)鍵刪除存儲(chǔ)的值。

3、代碼示例

列表頁(yè)搜索條件緩存, 使用sessionStorage實(shí)現(xiàn)簡(jiǎn)單的功能, 
存儲(chǔ)數(shù)據(jù)+讀取數(shù)據(jù)+清除數(shù)據(jù)

a、存取單個(gè)數(shù)據(jù)

sessionStorage.setItem("param", "我叫你一聲你敢答應(yīng)嗎?");
let param = sessionStorage.getItem("param")
//我叫你一聲你敢答應(yīng)嗎?
console.log(param ); 

b、存取對(duì)象

sessionStorage也可存儲(chǔ)Json對(duì)象：
存儲(chǔ)時(shí)，通過(guò)JSON.stringify()將對(duì)象轉(zhuǎn)換為文本格式；
讀取時(shí)，通過(guò)JSON.parse()將文本轉(zhuǎn)換回對(duì)象。
sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
if (sessionStorage.getItem("queryParams")) {this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}

c、清除數(shù)據(jù)

sessionStorage.removeItem("queryParams");

二、localStorage

1、簡(jiǎn)介

• ?? localStorage用于在瀏覽器中永久存儲(chǔ)數(shù)據(jù)，即使用戶關(guān)閉瀏覽器標(biāo)簽頁(yè)或窗口，數(shù)據(jù)仍然保留。
• 存儲(chǔ)的數(shù)據(jù)不會(huì)自動(dòng)過(guò)期，除非顯式地從代碼中刪除或用戶清除瀏覽器緩存。
• 存放數(shù)據(jù)大小一般為5MB；
• 僅在瀏覽器中保存，不參與服務(wù)器通信；

2、方法

1. 使用localStorage.setItem(key, value)方法將數(shù)據(jù)存儲(chǔ)在localStorage中。
2. 使用localStorage.getItem(key)方法根據(jù)鍵獲取存儲(chǔ)的值。
3. 使用localStorage.removeItem(key)方法根據(jù)鍵刪除存儲(chǔ)的值。

3、代碼示例

// 設(shè)置localStorage中的數(shù)據(jù)
localStorage.setItem('key', 'value');
// 獲取localStorage中的數(shù)據(jù)
const value = localStorage.getItem('key');
console.log(value);  // 輸出：value
// 刪除localStorage中的數(shù)據(jù)
localStorage.removeItem('key');

三、cookie

1、簡(jiǎn)介

• Cookie是一種在瀏覽器中存儲(chǔ)數(shù)據(jù)的機(jī)制，用于跟蹤和識(shí)別用戶。
• 可以設(shè)置Cookie的過(guò)期時(shí)間，使數(shù)據(jù)在指定時(shí)間后失效。
• 即使用戶關(guān)閉瀏覽器，存儲(chǔ)在Cookie中的數(shù)據(jù)也可以保留，除非設(shè)置了過(guò)期時(shí)間。

2、方法

1. 使用document.cookie屬性進(jìn)行設(shè)置和獲取Cookie值。
2. 使用document.cookie = "key=value; expires=expiration_time; path=/;"語(yǔ)法設(shè)置Cookie。
3. 使用document.cookie獲取所有Cookie值。
4. 使用document.cookie = "key=; expires=expiration_time; path=/;"語(yǔ)法刪除Cookie。

3、代碼示例

// 設(shè)置cookie
document.cookie = "key=value; expires=expiration_time; path=/;";
// 獲取所有cookie
const cookies = document.cookie;
console.log(cookies);
// 刪除cookie
document.cookie = "key=; expires=expiration_time; path=/;";

四、三者區(qū)別

這些存儲(chǔ)機(jī)制各有優(yōu)劣和適用場(chǎng)景。sessionStorage適用于在會(huì)話期間保持?jǐn)?shù)據(jù)，
localStorage適用于需要永久存儲(chǔ)數(shù)據(jù)的場(chǎng)景，
而Cookie用于跟蹤用戶和設(shè)置過(guò)期時(shí)間的需求。根據(jù)具體的應(yīng)用需求，選擇適合的存儲(chǔ)機(jī)制可以更好地管理和存儲(chǔ)數(shù)據(jù)。

1、sessionStorage與localStorage區(qū)別

• sessionStorage在瀏覽器會(huì)話期間有效，而localStorage是持久的。
• sessionStorage在用戶關(guān)閉瀏覽器標(biāo)簽頁(yè)或窗口時(shí)會(huì)被清除，而localStorage會(huì)一直保留。
• sessionStorage和localStorage的使用方法相似，都是使用setItem、getItem和removeItem方法進(jìn)行操作。

2、sessionStorage、localStorage、cookie區(qū)別

1. 存儲(chǔ)容量：sessionStorage和localStorage都提供了大約5MB的存儲(chǔ)空間，而Cookie只能存儲(chǔ)4KB的數(shù)據(jù)。
2. 生命周期：sessionStorage的數(shù)據(jù)在單個(gè)會(huì)話期間有效，關(guān)閉瀏覽器后數(shù)據(jù)將被清除；localStorage的數(shù)據(jù)是永久性的，除非手動(dòng)清除或代碼刪除；Cookie可以設(shè)置過(guò)期時(shí)間，可以在指定時(shí)間之前保持有效。
3. 存儲(chǔ)位置：sessionStorage、localStorage和Cookie數(shù)據(jù)都存儲(chǔ)在客戶端，不涉及服務(wù)器。
4. 存儲(chǔ)機(jī)制：sessionStorage、localStorage和Cookie都使用鍵值對(duì)的方式存儲(chǔ)數(shù)據(jù)。
5. 跨窗口通信：sessionStorage和localStorage不支持跨窗口通信，而Cookie支持。
6. 跨域名訪問：sessionStorage和localStorage不支持跨域名訪問，而Cookie支持。
7. 瀏覽器支持：sessionStorage和localStorage在現(xiàn)代瀏覽器中得到支持，而Cookie在所有瀏覽器中都可用。
8. 與服務(wù)器交互：sessionStorage、localStorage不會(huì)自動(dòng)發(fā)送數(shù)據(jù)到服務(wù)器，而Cookie在每次HTTP請(qǐng)求中都會(huì)自動(dòng)發(fā)送到服務(wù)器。

特性	sessionStorage	localStorage	cookie
存儲(chǔ)容量	5MB	5MB	4KB
生命周期	單個(gè)會(huì)話期間	永久	可設(shè)置
存儲(chǔ)位置	客戶端	客戶端	客戶端
存儲(chǔ)機(jī)制	鍵值對(duì)	鍵值對(duì)	鍵值對(duì)
跨窗口通信	不支持	不支持	支持
跨域名訪問	不支持	不支持	支持
瀏覽器支持	現(xiàn)代瀏覽器	現(xiàn)代瀏覽器	所有瀏覽器
與服務(wù)器交互	不自動(dòng)發(fā)送	不自動(dòng)發(fā)送	自動(dòng)發(fā)送