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 | 菜鳥教程