一、sessionStorage
1、簡介
sessionStorage用于在瀏覽器會話期間存儲數(shù)據(jù)，數(shù)據(jù)僅在當前會話期間有效。
存儲的數(shù)據(jù)在用戶關閉瀏覽器標簽頁或窗口后會被清除。
2、方法
使用sessionStorage.setItem(key, value)方法將數(shù)據(jù)存儲在sessionStorage中。
使用sessionStorage.getItem(key)方法根據(jù)鍵獲取存儲的值。
使用sessionStorage.removeItem(key)方法根據(jù)鍵刪除存儲的值。
3、代碼示例
列表頁搜索條件緩存, 使用sessionStorage實現(xiàn)簡單的功能,
存儲數(shù)據(jù)+讀取數(shù)據(jù)+清除數(shù)據(jù)
a、存取單個數(shù)據(jù)
sessionStorage.setItem("param","我叫你一聲你敢答應嗎?");letparam = sessionStorage.getItem("param")//我叫你一聲你敢答應嗎?console.log(param );
b、存取對象
sessionStorage也可存儲Json對象：存儲時，通過JSON.stringify()將對象轉(zhuǎn)換為文本格式；讀取時，通過JSON.parse()將文本轉(zhuǎn)換回對象。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、簡介
?? localStorage用于在瀏覽器中永久存儲數(shù)據(jù)，即使用戶關閉瀏覽器標簽頁或窗口，數(shù)據(jù)仍然保留。
?? 存儲的數(shù)據(jù)不會自動過期，除非顯式地從代碼中刪除或用戶清除瀏覽器緩存。
?? 存放數(shù)據(jù)大小一般為5MB；
?? 僅在瀏覽器中保存，不參與服務器通信；
2、方法
??? 使用localStorage.setItem(key, value)方法將數(shù)據(jù)存儲在localStorage中。
??? 使用localStorage.getItem(key)方法根據(jù)鍵獲取存儲的值。
??? 使用localStorage.removeItem(key)方法根據(jù)鍵刪除存儲的值。
3、代碼示例
// 設置localStorage中的數(shù)據(jù)localStorage.setItem('key','value');// 獲取localStorage中的數(shù)據(jù)constvalue =localStorage.getItem('key');console.log(value);// 輸出：value// 刪除localStorage中的數(shù)據(jù)localStorage.removeItem('key');
三、cookie
1、簡介
Cookie是一種在瀏覽器中存儲數(shù)據(jù)的機制，用于跟蹤和識別用戶。
可以設置Cookie的過期時間，使數(shù)據(jù)在指定時間后失效。
即使用戶關閉瀏覽器，存儲在Cookie中的數(shù)據(jù)也可以保留，除非設置了過期時間。
2、方法
使用document.cookie屬性進行設置和獲取Cookie值。
使用document.cookie = "key=value; expires=expiration_time; path=/;"語法設置Cookie。
使用document.cookie獲取所有Cookie值。
使用document.cookie = "key=; expires=expiration_time; path=/;"語法刪除Cookie。
3、代碼示例
// 設置cookiedocument.cookie="key=value; expires=expiration_time; path=/;";// 獲取所有cookieconstcookies =document.cookie;console.log(cookies);// 刪除cookiedocument.cookie="key=; expires=expiration_time; path=/;";
四、三者區(qū)別
這些存儲機制各有優(yōu)劣和適用場景。
sessionStorage適用于在會話期間保持數(shù)據(jù)，
localStorage適用于需要永久存儲數(shù)據(jù)的場景，
而Cookie用于跟蹤用戶和設置過期時間的需求。
根據(jù)具體的應用需求，選擇適合的存儲機制可以更好地管理和存儲數(shù)據(jù)。
1、sessionStorage與localStorage區(qū)別
sessionStorage在瀏覽器會話期間有效，而localStorage是持久的。
sessionStorage在用戶關閉瀏覽器標簽頁或窗口時會被清除，而localStorage會一直保留。
sessionStorage和localStorage的使用方法相似，都是使用setItem、getItem和removeItem方法進行操作。
2、sessionStorage、localStorage、cookie區(qū)別
存儲容量：sessionStorage和localStorage都提供了大約5MB的存儲空間，而Cookie只能存儲4KB的數(shù)據(jù)。
生命周期：sessionStorage的數(shù)據(jù)在單個會話期間有效，關閉瀏覽器后數(shù)據(jù)將被清除；localStorage的數(shù)據(jù)是永久性的，除非手動清除或代碼刪除；Cookie可以設置過期時間，可以在指定時間之前保持有效。
存儲位置：sessionStorage、localStorage和Cookie數(shù)據(jù)都存儲在客戶端，不涉及服務器。
存儲機制：sessionStorage、localStorage和Cookie都使用鍵值對的方式存儲數(shù)據(jù)。
跨窗口通信：sessionStorage和localStorage不支持跨窗口通信，而Cookie支持。
跨域名訪問：sessionStorage和localStorage不支持跨域名訪問，而Cookie支持。
瀏覽器支持：sessionStorage和localStorage在現(xiàn)代瀏覽器中得到支持，而Cookie在所有瀏覽器中都可用。
與服務器交互：sessionStorage、localStorage不會自動發(fā)送數(shù)據(jù)到服務器，而Cookie在每次HTTP請求中都會自動發(fā)送到服務器。
