sessionStorage

簡(jiǎn)介

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

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

方法

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

代碼示例

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

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

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

存取對(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"));
}

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

sessionStorage.removeItem("queryParams");

localStorage

簡(jiǎn)介

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

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

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

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

方法    

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

代碼示例

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

簡(jiǎn)介

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

方法

• 使用document.cookie屬性進(jìn)行設(shè)置和獲取Cookie值。
• 使用document.cookie = "key=value; expires=expiration_time; path=/;"語(yǔ)法設(shè)置Cookie。
• 使用document.cookie獲取所有Cookie值。
• 使用document.cookie = "key=; expires=expiration_time; path=/;"語(yǔ)法刪除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ū)別

這些存儲(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ù)。

sessionStorage與localStorage區(qū)別

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

sessionStorage、localStorage、cookie區(qū)別

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

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

最新評(píng)論