受後端開發redis啟發，基於瀏覽器sessionStorage儲存的ajax效能優化。
一.需求
隨著單頁面和前後端分離的興起，ajax已經成為大部分前後端資料互動的途徑。雖然ajax是非同步的，但是隨著頁面上的需求越來越多，進入頁面後要發很多個ajax請求，這樣增加了伺服器的壓力，使用者體驗也不太好。而且有很多ajax請求（如商品詳情）可能每次請求返回的資料是一樣的。如果用瀏覽器的請求快取或者nginx的快取都要走一下網路請求，而且快取也不好控制。
二.解決方案
受redis的啟發，基於sessionStorage和localStorage做一套本地的key->value存取機制。用sessionStorage的好處是瀏覽器關閉後自己清空，防止資料一直快取在本地。
三.具體實施（基於vue）
1.首先寫一個公共的ajax請求方法，用來執行這個機制。
Vue.prototype.$post = function(url,data={},cb){
}
複製程式碼2.在這個方法內處理sessionStorage需要的key和value。由於sessionStorage對key沒有特殊的要求，所以key是用請求地址url+請求的引數data拼起來的字串，data拼成瀏覽器的queryData形式
Vue.prototype.$post = function(url,data={},cb){
let k = url+this.toQueryString(data);
}
Vue.prototype.toQueryString =function(data){
let s = '';
for(var i in data){
s+=(i+'='+data[i]+'&')
}
return s.substring(0,s.length-1)
}
複製程式碼3.然後開始儲存過程
Vue.prototype.$post = function(url,data={},cb){
let k = url+this.toQueryString(data);
/*vue-resource的ajax請求*/
Vue.http.post(url,data,{
timeout:60000
}).then(res=>{
/*只儲存請求成功的請求*/
if(res.body.code===10000000){
sessionStorage[k]=JSON.stringify(res);
}
cb(res.body);
})
}
複製程式碼原諒我們之前的框架有點舊，ajax用的還是回撥。
這樣簡單的儲存過程就完成了。
4.讀取過程
在k下面加上一些判斷取出來就行
let k = url+this.toQueryString(data);
if(sessionStorage[k]){
cb(JSON.parse(sessionStorage[k]));
return;
}
複製程式碼5.優化，錯誤處理
(1)眾所周知，瀏覽器對sessionStorage最大支援是5M,大部分情況我們的ajax資料在一個session會話中不會超過那麼大，但是也不能排隊特殊情況。所以當sessionStorage的儲存超過最大值時，需要處理一下。
原理也很簡單，加一段try-catch就可以了
try{
sessionStorage[k]=JSON.stringify(res);
}catch(e){
sessionStorage.clear()
}
複製程式碼(2)升級：可以加入引數來控制sessionStorage的儲存時間等
(3)有更好的功能或者優化大家也可以提出來一起探討。
附上一張sessionStorage的效果圖