前端基于浏览器存储的AJAX性能优化

受后端开发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的效果图