客戶端緩存，可以減少請求的次數(shù)，減輕服務(wù)器的負(fù)擔(dān)，提升網(wǎng)頁加載速度。
一、cookie特點(diǎn)：
1、有時效性，不設(shè)置有效期，默認(rèn)關(guān)閉瀏覽器就失效。
2、分域名儲存，在當(dāng)前域名下儲存只能在當(dāng)前域名下使用。單個域名最多有20個cookie，有的瀏覽器是50個。單個cookie小于4KB。
3、分路徑儲存，根路徑不能用子路徑的數(shù)據(jù)，子路徑可以用根路徑的數(shù)據(jù)。
4、cookie識別的時間是世界時間，和我們北京時間有八個小時時差
5、cookie設(shè)置document.cookie = '鍵=值;expires=失效時間;path=要儲存的路徑;'
// document.cookie = '鍵=值;expires=失效時間;path=要儲存的路徑;'
var date = new Date();
date.setTime(date.getTime() - 8*3600*1000 + 2*3600*1000);
//上面的時間表示，當(dāng)前時間戳 - 八小時 + 兩個小時
//減八小時是為了獲取到正確的世界時間，不然直接獲取時間戳是北京時間
//加兩個小時表示該數(shù)據(jù)有效時間為兩個小時
document.cookie = `name=李四;expires=${date};path=/`
// path=/ 表示儲存在根目錄下
6、cookie清除document.cookie = '鍵=值;expires=失效時間改到已經(jīng)過去的時間';
document.cookie = 'name=張三'
let time = new Date()
time.setTime(time.getTime() - 8*3600*1000 - 1)
document.cookie = 'name=null;expires=' + time
console.log(document.cookie)

二、Web Storage，分為 localStorage 和 sessionStorage
LocalStorage和SessionStorage優(yōu)點(diǎn)：擁有更大的存儲容量，Cookie是4k，Web Storage為5M。 操作數(shù)據(jù)相比Cookie更簡單。 不會隨著每次請求發(fā)送到服務(wù)端。
使用sessionStorage = window.sessionStorage; localStorage = window.localStorage;
//存儲一個item  storage.setItem('name', 'Alice');  storage.setItem('age', '5');
//讀取一個item  storage.getItem('name') // returns "Alice"
//get存儲對象長度 storage.length // returns 2
//通過索引get對應(yīng)的key名 storage.key(0) // returns "name"
//移除一個item storage.removeItem('name')
//清空存儲對象 storage.clear()
//設(shè)置方式2
storage.jsonData = JSON.stringify(jsonData)
//獲取方式2
storage.jsonData

LocalStorage與SessionStorage的區(qū)別
LocalStorage：數(shù)據(jù)會永久儲存，不清除的話一直都在
SessionStorage：瀏覽器刷新或者關(guān)閉時，數(shù)據(jù)會丟失
LocalStorage和SessionStorage之間的主要區(qū)別在于瀏覽器窗口和選項(xiàng)卡之間的數(shù)據(jù)共享方式不同。
LocalStorage可跨瀏覽器窗口和選項(xiàng)卡間共享。就是說如果在多個選項(xiàng)卡和窗口中打開了一個應(yīng)用程序，而一旦在其中一個選項(xiàng)卡或窗口中更新了LocalStorage，則在所有其他選項(xiàng)卡和窗口中都會看到更新后的LocalStorage數(shù)據(jù)。
但是，SessionStorage數(shù)據(jù)獨(dú)立于其他選項(xiàng)卡和窗口。如果同時打開了兩個選項(xiàng)卡，其中一個更新了SessionStorage，則在其他選項(xiàng)卡和窗口中不會反映出來。舉個例子：假設(shè)用戶想要通過兩個瀏覽器選項(xiàng)卡預(yù)訂兩個酒店房間。由于這是單獨(dú)的會話數(shù)據(jù)，因此使用SessionStorage是酒店預(yù)訂應(yīng)用程序的理想選擇。
安全性說明
Web Storage的存儲對象是獨(dú)立于域名的，也就是說不同站點(diǎn)下的Web應(yīng)用有著自己獨(dú)立的存儲對象，互相間是無法訪問的，在這一點(diǎn)上SessionStorage和LocalStorage是相同的。
舉個例子：部署在abc.com上的Web應(yīng)用無法訪問xyz.com的Web Storage存儲對象。
同樣，對于子域名也是一樣，盡管www.grapecity.com.cn和gcdn.grapecity.com.cn 同屬 grapecity.com.cn 主域下，但它們相互不能訪問對方的存儲對象。
另外，不僅對子域名相互獨(dú)立，對于針對使用http和https協(xié)議間也是不同的，所以這一點(diǎn)也需要注意。