sessionStorage

簡介

   - sessionStorage用于在瀏覽器會話期間存儲數(shù)據(jù)，數(shù)據(jù)僅在當(dāng)前會話期間有效。  

- 存儲的數(shù)據(jù)在用戶關(guān)閉瀏覽器標簽頁或窗口后會被清除。

方法

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

代碼示例

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

存取單個數(shù)據(jù)

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

存取對象

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"));
}

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

sessionStorage.removeItem("queryParams");

localStorage

簡介

   - localStorage用于在瀏覽器中永久存儲數(shù)據(jù)，即使用戶關(guān)閉瀏覽器標簽頁或窗口，數(shù)據(jù)仍然保留。  

- 存儲的數(shù)據(jù)不會自動過期，除非顯式地從代碼中刪除或用戶清除瀏覽器緩存。

   - 存放數(shù)據(jù)大小一般為5MB；

   - 僅在瀏覽器中保存，不參與服務(wù)器通信；

方法    

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

代碼示例

// 設(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

簡介

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

方法

• 使用document.cookie屬性進行設(shè)置和獲取Cookie值。
• 使用document.cookie = "key=value; expires=expiration_time; path=/;"語法設(shè)置Cookie。
• 使用document.cookie獲取所有Cookie值。
• 使用document.cookie = "key=; expires=expiration_time; path=/;"語法刪除Cookie。

代碼示例

// 設(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ū)別

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

sessionStorage與localStorage區(qū)別

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

sessionStorage、localStorage、cookie區(qū)別

• sessionStorage在瀏覽器會話期間有效，localStorage是持久的，而Cookie可以設(shè)置過期時間。
• sessionStorage和localStorage的存儲容量通常比Cookie大得多。
• sessionStorage和localStorage的使用方法相似，都是使用setItem、getItem和removeItem方法進行操作，而Cookie使用document.cookie屬性。
• sessionStorage和localStorage只能存儲字符串類型的數(shù)據(jù)，而Cookie可以存儲字符串、數(shù)字、布爾值等類型的數(shù)據(jù)。

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

最新評論