H5中緩存機制

webstorage機制

一、localStorage

用於永久性的進行本地緩存，不會自動清除、沒有過期時間，直至手動清除數據。

存儲方式

● 以鍵值對的形式進行存儲 ， 存儲的方式只能是String類型。獲取的數據也只能是String類型

window.localStorage.setItem('isDevice','false')；
const isDevice = window.localStorage.getItem('isDevice');
if(isDevice){
    console.log("welcome to device");
}else{
    console.log('error');
}
//運行結果
weicome to device
//false只是表示String類型，不能表示boolean類型

常用API

//存儲數據
window.localStorage.setItem('isDevice','false');
//獲取數據
window.localStorage.getItem('isDevice');
//刪除數據
window.localStorage。removeItem（'isDevice'）;
//清空數據
window.localStorage.clear();
//獲取鍵值對
window.localStorage.key(n);

說明：通過getItem獲取到的數據都是String類型，需要根據業務需求將數據轉換為不同的數據類型。

二、sessionStorage

用於本地存儲會話數據

存儲范圍

● 在同一個會話的頁面可以訪問
● 不同的瀏覽器之間不能進行訪問
● 同源窗口不能進行訪問
● 會話結束、窗口關閉后緩存失效

存儲方式

鍵值對方式存儲，存儲類型為String類型

常用API

同localStorage

---

cookie機制

cookie與webStorage的區別

● 數據存儲
cookie的數據始終在http的同源請求中存儲，數據可以在客戶端與服務器端進行回傳。webStorage的數據只能進行本地存儲，不能向服務器進行傳遞。
● 生命周期
sessionStorage是會話級別的緩存，在當次會話結束后緩存數據被清除。
localStorage是永久緩存，直到被手動清除
cookie可以設置聲明周期，到該時間失效
● 存儲的數據量
每次http的請求都會攜帶cookie，所以cookie的大小存在限制。cookie存儲數據的大小要求不能超過4k
webStorage數據因為只在本地進行緩存，對數據存儲量的可以達到4-5M
● 作用域
sessionStorage的作用在同一次會話之間，不在不同瀏覽器及同源之間進行共享。
localStorage作用在同源瀏覽器之間
cookie的作用域也是在同源瀏覽器之間

cookie常用方法

//存儲cookie
document.cookie = 'userName = Yun '
document.cookie = 'userNmae = Yun ; expires = Thu, 18 Dec 2043 12:00:00 GMT;'
//讀取cookie
const userName = document.cookie;
//修改cookie
document.cookie = 'userName = Zhiyao'
//刪除cookie , 即時間設置為過去的時間即可
document.cookie = 'userName = ;expires = Thu, 18 Dec 2043 12:00:00 GMT;'

說明：在存儲cookie的時候雖然存儲的是string類型，但是獲取到的時候都是以=鍵值對的形式獲取到的數據。在進行獲取數據的時候要對數據進行截取。

使用示例

function setCookie(cname , name , time) {
   let now = new Date();
   now.getTime(now.getTime()+(time*24*60*60));
   let expires = 'expires = '+ now.toGMTString();
   let username = cname+'='+name;
   document.cookie=username;
}

function getCookie(key) {
   let cookieArr = document.cookie.split(';');
   let name = key+'=';
   for (var k in cookieArr){
     if (cookieArr[k].trim().indexOf(name) === 0 ){
       return   cookieArr[k].trim().substring(name.length,cookieArr[k].trim().length)
     }
   }
   return "";
}

function checkCookie(){
  let name = getCookie('name');
  if (name !== ''){
      alert("歡迎"+name+"再次光臨");
  }else {
    setCookie("name",'song',30);
  }
}

---

webStorage與cookie的對比

1、webstorage 只存儲在客戶端本地，不占用帶寬
2、webStorage 可以減少不必要的一些請求
3、webstorage只能保存在本地，不能與服務器進行交互
4、webstorage只能手動清除或者臨時存儲，不能自動清除

參考鏈接：
h5的緩存機制
JavaScript設置cookie | 菜鳥教程

來自為知筆記(Wiz)