緩存應用

前言

不積跬步，無以至千里；不積小流，無以成江海；很久沒上來寫博客了，趁着疫情在家，尋思將這些年的一些小經驗記錄下來。

一、什麼是緩存

緩存原本是一個硬件的概念：緩存就是數據交換的緩衝區（稱作Cache），當某一硬件要讀取數據時，會首先從緩存中查找需要的數據，如果找到了則直接執行，找不到的話則從內存中找。由於緩存的運行速度比數據庫快得多，故緩存的作用就是幫助硬件更快地運行。

二、緩存的主要作用

• 加快頁面打開速度

• 減少網絡帶寬消耗

• 降低服務器壓力

三、緩存類型

在一個web應用中，緩存大體可分爲三類：網絡中的緩存、服務端緩存、客戶端緩存；

1、網絡中的緩存

網絡中的緩存位於客戶端和服務端之間，代理或響應客戶端的網絡請求，從而對重複的請求返回緩存中的數據資源更新緩存中的內容。最常見的就是CDN，例如將圖片、js、css、html等靜態文件放入cdn節點中。

2、服務端緩存

服務端緩存包括：數據庫緩存、中間件緩存；在數據庫查詢時，select會將查詢結果放入緩衝區，後面再次查詢時，會直接從緩衝區讀取。中間件緩存主要包括redis、mongoDB、Memcached。

3、客戶端緩存

客戶端緩存包括：cookie(4kb左右)、localstorage(本地存儲永久存儲，5M左右，不同瀏覽器不一樣)、sessionstorage(會話期間存儲)、indexeddb(瀏覽器數據庫存儲)

四、客戶端緩存區別

特性	cookie	localStorage	sessionStorage	indexedDB
存儲大小	4kb左右	5MB左右，不同瀏覽器不一樣（2.5到10，具體大小可以去試試）	5MB左右，不同瀏覽器不一樣	不少於250M（無限）
存儲位置	瀏覽器	瀏覽器	瀏覽器	瀏覽器
存儲類型	字符串	字符串	字符串	字符串、二進制數據(ArrayBuffer 對象和 Blob 對象)
生命週期	一般由服務器生成，可以設置過期時間或者手動刪除	除非手動清理，否則一直存在	頁面關閉就清理	除非手動清理，否則一直存在
訪問權限	瀏覽器全局共享，域名隔離；同一個主機名	同一個協議、主機名、端口	同一個協議、主機名、端口、頁面窗口	網頁只能訪問自身域名下的數據庫，域名隔離
是否參與Http通訊	每次都會攜帶在header中，對應請求影響性能	不參與	不參與	不參與
使用場景	登錄信息、設置信息（網站語言），服務端生成cookie值，寫入到瀏覽器，後續接口請求自動帶上cookie，供服務端使用	前端緩存數據使用，例如編輯器草稿箱，定時去保存，頁面關閉後再次打開自動讀取緩存數據。主要在客戶端使用	頁面開場動畫，例如話題每次進來時的全屏動畫，表單提交數據維護，也可以採用sessionstorage；訪問足跡也適用，用來記錄上次訪問頁面	base64圖片數據保存，實例：淘寶網站
優點	能夠與服務端交互	相對cookie存儲空間更大 在瀏覽器中發送請求不會帶上web storage裏面的數據 更加友好的api 可以做永久存儲(localstorage)		可以存儲大量數據；在線離線都可以使用；

 

五、代碼示例

1. Cookie代碼

/* https://themetest.xueanquan.com/index.html?id=1 */
document.cookie="username=mengtao";
document.cookie="gender=male";
//Domain 標識指定了哪些域名可以接受Cookie。如果沒有設置domain，就會自動綁定到執行語句的當前域
document.cookie='age=20;domain=.xueanquan.com';
//設置過期時間
var now=new Date();now.setMinutes(now.getMinutes()+20);
document.cookie="username=mengtao;expires="+now.toGMTString();

//刪除cookie，本質上是設置cookie過期
var now=new Date();now.setDate(-1);
document.cookie="username=mengtao;expires="+now.toGMTString();

 

 

IndexedDB 是一種低級API，用於客戶端存儲大量結構化數據(包括文件和blobs)。該API使用索引來實現對該數據的高性能搜索。IndexedDB 是一個運行在瀏覽器上的非關係型數據庫。既然是數據庫了，那就不是 5M、10M 這樣小打小鬧級別了。理論上來說，IndexedDB 是沒有存儲上限的（一般來說不會小於 250M）。它不僅可以存儲字符串，還可以存儲二進制數據

Cookie 的本職工作並非本地存儲，而是“維持狀態”。HTTP協議是無狀態的，HTTP協議自身不對請求和響應之間的通信狀態進行保存，cookie就是用來維持狀態http的狀態

 

1. localStorage代碼

   /* localStorage */
   window.localStorage.setItem("mttest","這是一條測試數據");
   window.localStorage.getItem("mttest");
   window.localStorage.removeItem("mttest");
   window.localStorage.clear();
   
   var data={name:"張三",age:24,sex:'男'};
   window.localStorage.setItem("userinfo",JSON.stringify(data));
   var jsonStr=window.localStorage.getItem("userinfo");
   console.log(JSON.parse(jsonStr));
   
   
   

    

2. sessionStorage代碼

   /* sessionStorage */
   window.sessionStorage.setItem("mttest","這是一條測試數據");
   window.sessionStorage.getItem("mttest");
   window.sessionStorage.removeItem("mttest");
   window.sessionStorage.clear();
   
   var data={name:"張三",age:24,sex:'男'};
   window.sessionStorage.setItem("userinfo",JSON.stringify(data));
   var jsonStr=window.sessionStorage.getItem("userinfo");
   console.log(JSON.parse(jsonStr));
   
   

3. IndexedDB

   
   
   var databaseName = 'themetest';//數據庫的名字
   var version = 1;//數據庫版本號
   var db;//數據庫對象
   //打開數據庫，如果不存在，則創建新數據庫
   var request = window.indexedDB.open(databaseName, version);
   
   request.onerror = function (e) {
    console.log('數據庫打開失敗:',e);
   };
   
   request.onsuccess = function (e) {
    db=request.result;
    console.log('數據庫打開成功');
   }
   
   

   六、總結

4. Cookie 的本職工作並非本地存儲，而是“維持狀態”

5. Web Storage 是 HTML5 專門爲瀏覽器存儲而提供的數據存儲機制，不與服務端發生通信

6. IndexedDB 用於客戶端存儲大量結構化數據