一、前景介紹
1.1緩存是什麼？數據存儲是什麼？
緩存是代理服務器或客戶端磁盤內保存的一個資源副本。
當我們向服務器請求資源後，會根據情況將資源 copy 一份副本存在本地，以方便下次讀取。
它與本地存儲 localStorage 、cookie 等不同，本地存儲更多是數據記錄，存儲量較小，爲了本地操作方便。
而緩存更多是爲了減少資源請求，多用於存儲文件，存儲量相對較大。
前端緩存兩步：在“請求”和“響應”中進行。
在“請求”步驟中，瀏覽器也可以通過存儲結果的方式直接使用資源，直接省去了發送請求；
而“響應”步驟需要瀏覽器和服務器共同配合，通過減少響應內容來縮短傳輸時間
前端的數據存儲：通過把數據存儲在瀏覽器中，用戶不必每次都向服務器請求獲取同一個信息。
在離線時，使用本地存儲的數據而不是向遠端服務器上請求數據
客戶端存儲可以通過這些技術來實現：cookie、Web Storage、IndexedDB、userData。
1.2你的緩存的印象有哪些？
電視劇離線緩存、瀏覽器的搜索緩存、網頁的數據圖片緩存
1.3緩存、數據存儲的作用是什麼？
通過緩存，使用資源副本，大大減少獲取資源時間
減少請求時間，減少http請求個數
可以大幅度的降低網絡請求，減少流量的消耗
減少了冗餘的數據傳輸，節省了網費
減少了服務器的負擔，大大提升了網站的性能
存儲用戶信息，提升用戶體驗能夠減少網絡帶寬消耗、
減少延遲與網絡阻塞，同時降低服務器壓力，提高服務器性能
業務流程需要,簡化用戶操作,提升用戶體驗
二、使用介紹
2.1瀏覽器緩存
強緩存(expires\Cache-Control)：
定義:強制緩存就是向瀏覽器緩存查找該請求結果，並根據該結果的緩存規則來決定是否使用該緩存結果的過程
當客戶端請求後，會先訪問緩存數據庫看緩存是否存在。如果存在則直接返回；不存在則請求真的服務器，響應後再寫入緩存數據庫。
如果考慮使用緩存來優化網頁性能的話，強緩存應該是首先被考慮的。
強緩存是利用http的返回頭中的Expires或者Cache-Control兩個字段來控制的，用來表示資源的緩存時間。
expires字段：這是 HTTP 1.0 的字段，表示緩存到期時間，是一個絕對的時間 (當前時間+緩存時間),
Cache-Control字段：HTTP1.1新增字段,它是一個相對時間，主要是利用該字段的max-age值來進行判斷，例如Cache-Control:max-age=3600，代表着資源的有效期是3600秒。
下面幾個比較常用的設置值：
no-cache：不使用本地緩存。需要使用緩存協商，先與服務器確認返回的響應是否被更改，如果之前的響應中存在ETag，那麼請求的時候會與服務端驗證，如果資源未被更改，則可以避免重新下載。
no-store：直接禁止遊覽器緩存數據，每次用戶請求該資源，都會向服務器發送一個請求，每次都會下載完整的資源。
public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務器。
private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務器對其緩存。
優先級:cache-control -> expires
協商緩存(Last-Modified & If-Modified-Since\Etag & If-None-Match)：
定義:協商緩存就是強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程
協商緩存就是由服務器來確定緩存資源是否可用，客戶端與服務器端要通過某種標識來進行通信，從而讓服務器判斷請求資源是否可以緩存訪問
服務器通過 Last-Modified 字段告知客戶端，資源最後一次被修改的時間,客戶端會自己對這個時間進行比對
如果相等則表示未修改，響應 304；反之，則表示修改了，響應 200 狀態碼，並返回數據(如果資源更新的速度是秒以下單位,這個緩存就會失效,因爲時間單位是秒)
Etag 存儲的是文件的特殊標識(一般都是 hash 生成的)，服務器存儲着文件的 Etag 字段,之後的流程和 Last-Modified 一致
Last-Modified與ETag是可以一起使用的，服務器會優先驗證ETag，一致的情況下，纔會繼續比對Last-Modified，最後才決定是否返回304。
優先級: ETag -> Last-Modified
熟悉完強緩存和協商緩存,下面兩張圖帶你更加深刻理解
2.2 本地緩存
Cookie：
-
第一個功能就是用於解決http無狀態的缺點，在客戶端存儲會話信息，記錄用戶的狀態
-
第二個功能也就是我們現在也經常使用cookie在客戶端存儲一些其它的數據，可以設置使用範圍、增刪改查作用
//增改：
Cookies.set("token", res1.data.result.token, {
expires: 7,
path: "/",
domain: "101hr.com"
});
//刪除對應項
Cookies.remove("token", { path: "/", domain: "101hr.com" });
//查
Cookies.get("menuClick")
Web Storage：
-
是一種在客戶端存儲數據的一種機制，主要的目的是爲了克服由cookie帶來的一些限制
-
當數據需要被嚴格控制在客戶端上時，無須將數據在客戶端和服務器之間來回的進行傳送，並且可以存儲大量的跨會話的數據
-
Web Storage包含了兩種對象的定義，sessionStorage和localStorage
-
sessionStorage只能存儲字符串類型數據，無法直接存儲數組類型和JSON對象
-
所以可以JSON.stringify()方法轉換成字符串，再存儲到sessionstorage中,使用的時候再使用JSON.parse()轉化回來
//sessionStorage和localStorage的使用方式是相近的
//增改
localStorage.setItem('redirect_uri',res.data.result.redirect_uri)
//存儲數組和對象類型
localStorage.setItem('redirect_uri',JSON.stringify(res.data.result.redirect_uri))
sessionStorage.setItem('redirect_uri',res.data.result.redirect_uri)
//查
localStorage.getItem('redirect_uri’)
JSON.parse(localStorage.getItem('redirect_uri’))
//刪
localStorage.removeItem('redirect_uri’)
//清空storage數據
localStorage.clear()
vuex：
-
vuex是一個專爲vue.js應用程序開發的狀態管理器
-
它採用集中式存儲管理應用的所有組件的狀態，並且以相 應的規則保證狀態以一種可以預測的方式發生變化,採用單向數據流的方式更加快的定位到位置
-
數據保存在Vuex的state字段內,任何頁面組件都可以通過$store.state.變量名稱去讀取數據
-
修改state數據，顯示地提交mutations，使用this.$store.commit方法來執行mutations
-
頁面刷新數據恢復,故結合keep-alive、web Storage來使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
name: 'yan',
age: 23,
obj: [{ bookname: '荒誕', num: 20 }, { bookname: '行爲學', num: 30 }, { bookname: '荒誕行爲學', num: 40 }]
}
const mutations = {
changename (state, name) {
state.name = name
},
changeage (state) {
state.age++
}
}
const getters = {
checkObj (state) {
return state.obj.filter(res => { return res.num > 25 })
}
}
// 異步觸發
const actions = {
changeage (context) {
context.commit('changeage')
}
}
const store = new Vuex.Store({
// vuex的配置
state, mutations, getters, actions
})
//使用文件
changName () {
// vuex通過commit提交修改
this.$store.commit('changename', 'yanjiazhen')
this.$store.commit('changeage')
// getter獲取計算內容
this.obj = this.$store.getters.checkObj
}
想要更加深入學習vuex可以查看這篇文章
https://blog.csdn.net/weixin_44258964/article/details/105853865
三、比較
3.1 用戶行爲對緩存、數據存儲的影響
3.2 關於數據保存
-
http緩存的是保存在本地
-
cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie可在瀏覽器和服務器間來回傳遞
-
sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存
-
vuex保存在內存中
3.3 應用
（1）保存用戶登錄狀態、全局變量設置（token、用戶信息）
（2）跟蹤用戶行爲。
（3）vuex適合中大型單頁面應用