前言：我們來談談什麼是緩存？我們為什麼需要緩存呢？
緩存就是資料交換的緩沖區（稱作Cache），是存貯資料（使用頻繁的資料）的臨時地方。當使用者查詢資料，首先在緩存中尋找，如果找到了則直接執行。如果找不到，則去資料庫中查找。 緩存的本質就是用空間換時間，犧牲資料的實時性，以伺服器記憶體中的資料暫時代替從資料庫讀取最新的資料，減少資料庫IO，減輕伺服器壓力，減少網絡延遲，加快頁面打開速度。
前端緩存分類
前端緩存主要分為：
- HTTP緩存
- 浏覽器緩存
http緩存
- HTTP請求傳輸時用到的緩存，主要在伺服器代碼上設定
浏覽器緩存
- 浏覽器緩存則主要由前端開發在前端JavaScript上進行設定,對于我們的前端夥伴們，重點了解浏覽器緩存就可以啦！
使用緩存的優勢
正常來說，進行一個資料請求，可以分為發起網絡請求、後端處理、浏覽器響應三個步驟。而浏覽器緩存可以幫助我們在第一和第三步驟中優化性能。 比如說直接使用緩存而不發起請求，或者發起了請求但後端存儲的資料和前端一緻，那麼就沒有必要再将資料回傳回來，這樣就減少了響應資料。同時由于緩存檔案可進行重複利用，極大程度降低伺服器壓力。是以說緩存是性能優化中簡單高效的一種優化方式了。
緩存的過程分析
我們簡單的來看一個網絡請求的圖檔
通過上圖，我們不難看出，當浏覽器第一次請求，首先會先查找緩存，若查找不到才發起http請求，并且在請求結束之後。我們可将請求結果存儲在浏覽器中，便于下次直接使用緩存資料
那麼浏覽器本地緩存到底有哪些呢？有什麼差別呢？
- cookie
- localStorage
- sessionStorage
1、存儲大小不同
cookie主要用于存儲使用者資訊，存儲空間小，隻有4Kb localStorage、sessionStorage存儲空間較大，目前可以達到5M及以上
2、生命周期（緩存存活的最大時間）
cookie:會設定一個expires（max-age）則cookie會在指定的時間失效，若沒有設定結束時間，則預設為session,關閉浏覽器則失效 localStorage:資料會永久存在，除非後期手動進行清除 sessionStorage:僅存在于會話期間，浏覽器關閉則緩存失效
3、伺服器通訊
cookie:對伺服器發起http請求時,每次都會将資料攜帶在http請求中，過多儲存cookie則帶來性能問題,占用帶寬 localStorage和sessionStorage：資料不是由每個伺服器請求傳遞，而是隻有在請求時使用資料，而不參與伺服器的通訊
4、操作方法
cookie的操作方法較為複雜，需要單獨封裝setCookie、getCookie等方式設定與讀取緩存 localStorage和sessionStorage采用的是統一API進行操作，操作方法如下
getItem(key)擷取緩存
setItem(key,value)設定修改緩存
removeItem(key)移除單個緩存
clear()清空所有緩存 經過對比，我們不難發現localStorage和sessionStorage相對cookie要優秀許多
舉個栗子：
在注冊登入子產品中，我們點選登入按鈕後請求後端接口，後端驗證賬号後一般會傳回使用者相關資訊，例如使用者名或者token等類型資料，而此類資料需要在項目中多個頁面使用。若每次都去發起http請求，肯定會增加伺服器壓力，那麼最好的方法則是将其通過緩存儲存下來，使用時直接通過浏覽器擷取
我們通過以下代碼進行登入,當登入成功後将傳回的token采用sessionStorage進行存儲
loginDom.addEventListener('click', function () {
//非空驗證
if (!(telDom.value && pwdDom.value)) {
common.toast('輸入的内容不能為空', false);
return;
}
let postData = {
account: telDom.value,
password: pwdDom.value
}
// 調用登入接口
axios.post('/api/user/login', postData).then(function (res) {
// 判斷登入是否成功
if (res.data.errno == 0) {
common.toast('登入成功', true);
// 将token寫入緩存
sessionStorage.setItem('token', res.data.data.token);
location.href = './index.html'
} else {
common.toast(res.data.message, false);
telDom.value = '';
pwdDom.value = '';
}
}) 在浏覽器控制台Application中即可檢視緩存是否存入
而在後續需要使用的地方，則通過getItem擷取即可
if (sessionStorage.getItem('token')) {
//擷取出存入的緩存
let token = sessionStorage.getItem('token');
axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
}