［開源］jquery-ajax-cache：快速優化頁面ajax請求，使用localStorage緩存請求

　　項目：jquery-ajax-cache

　　地址：https://github.com/WQTeam/jquery-ajax-cache

　　   

　　最近在項目中用到了本地緩存localStorage作數據的緩存。

一、簡單說下localStorage

　　localStorage和cookies相比，在瀏覽器中存儲的容量更大。另外最大的特色是不會附帶在http請求中傳給後臺，不會像cookies同樣致使http頭部變大影響傳輸性能。基於這個緣由，localStorage適合緩存一些經常使用的數據，無需平凡的像後臺請求數據。

　　localStorage的API很是簡單 參考

　　經常使用的兩個方法 setItem 和 getItem

　　

localStorage.setItem(key, value); 　　

locaStorage.getItem(key); // return value

　　

　　因爲存儲的內容都是 string 類型。當須要存入js 對象時。須要先把js 對象轉爲string。方法也很簡單JSON.stringify，取出時對應的使用JSON.parse

二、項目中該如何使用localStorage

　　localStorage 做爲一種前端的存儲方式和後臺的數據庫相比，最大的不一樣是這種儲存是一種不可靠的存儲。用戶能夠隨時清除瀏覽器緩存，另一些瀏覽器的無痕瀏覽模式會禁用localStorage。因此localStorage最好只是用爲性能優化的緩存，而不是數據的持久化。但做爲緩存localStorage又太過簡單，沒法設置超時時間，另外一個項目有爲此作了擴展：web-storage-cache   。

三、實際運用中有沒有更好的方式

　　項目中作性能優化，咱們都但願優化的方式是不影響原有代碼、不增長新的代碼邏輯。

　　假設業務場景中有某段數據是被多個地方用到的，最直觀的作法是：

　　

var data = localStorage.getItem('cacheKey');

if (!data) { // 若是data爲空，發出請求
 $.ajax({
   url: 'xxxx',
   success: function(response) {
　　　　　if(response.code === 1) {  // success!
　　　　　　　　loccalStorage.setItem('cacheKey', response.data);
　　　　　}
        // 其餘業務處理。。。          
   }
})      
}
 

 

    若是接口設計是統一的，能夠統一封裝本身的ajax方法，攔截請求

function myAjax() {
    var arg = arguments[0];
    var realSuccess = arg.success;
    var realBeforeSend = arg.beforeSend;
    arg.success = function(response) {
    if(response.code === 1) {
        localStorage.setItem(cacheKey /*須要根據請求參數生成不同的key*/ , response.data);
    }
    realSuccess && realSuccess.apply(null, arguments);
    }
    $.ajax(arg);
}

   如上面代碼，同理能夠增長beforeSend攔截請求判斷是否在緩存中讀取。這樣業務邏輯就更少的受到影響。

 

四、jQuery自己支持ajax方法的擴展

　　上面是大多人採用的方式，但事實上jQuery對ajax提供了更好的擴展方式。經過$.ajaxPrefilter 和 $.ajaxTransport這兩個方法能夠更好的作攔截。jquery-ajax-cache插件中使用的也是這種方式。

 

 　　本人對剛剛定爲標準的ES2015 和 webpack都挺有興趣，因此此開源項目都有用到。

 

五、關於jquery-ajax-cache

　　jquery-ajax-cache 插件擴展了jQuery的$.ajax，提供很是便利的方式緩存ajax請求到‘localStorage’或‘sessionStorage’中。你惟一要作的就是實現cacheValidate方法，驗證返回結果是否須要緩存。頁面加載和數據讀寫過程插件都會進行過時數據清除，避免過時數據的堆積。同時你也能夠調用$ajaxCache.deleteAllExpires()手動清除過時緩存。

　　全局配置

$ajaxCache.config({
    // 業務邏輯判斷請求是否緩存， res爲ajax返回結果, options 爲 $.ajax 的參數
    cacheValidate: function (res, options) {    //選填，配置全局的驗證是否須要進行緩存的方法,「全局配置」 和 」自定義「，至少有一處實現cacheValidate方法
        return res.state === 'ok';
    },
    storageType: 'localStorage', //選填，‘localStorage’ or 'sessionStorage', 默認‘localStorage’
    timeout: 60 * 60, //選填， 單位秒。默認1小時
});

     簡單實用

$.ajax({
    // 使用時 只要增長給ajax請求增長一行屬性   ajaxCache: true
    ajaxCache: true     // 「全局配置」 和 」自定義「，至少有一處實現cacheValidate方法
    /*
     others...
    */
});

　自定義

$.ajax(
    // 此處的參數會覆蓋‘全局配置’中的設置
    ajaxCache: {
        // 業務邏輯判斷請求是否緩存， res爲ajax返回結果, options 爲 $.ajax 的參數
        cacheValidate: function (res, options) { //選填，配置全局的驗證是否須要進行緩存的方法, 「全局配置」 和 」自定義「，至少有一處實現cacheValidate方法
            return res.state === 'ok' && res.code ==='200';
        },
        storageType: 'localStorage', //選填，‘localStorage’ or 'sessionStorage', 默認‘localStorage’
        timeout: 60 * 60, //選填， 單位秒。默認1小時
    }
});

 

因爲我的能力有限，不免有bug，能夠反映到https://github.com/WQTeam/jquery-ajax-cache/issues