h5-localStorage實現緩存ajax請求數據

 

使用背景：要實現每次鼠標hover“能力雷達”，則顯示能力雷達圖（通過ajax請求數據實現雷達圖數據顯示），所以每次hover都去請求ajax會影響性能，因此這里要用到本地緩存。

實現：

此處是通過傳id去請求能力雷達圖數據，因此要setItem()的不止1個，所以當ajax返回result后，根據id去創建名稱 

 $.ajax({
                type: "POST",
                cache: false,
                url: "/Question/GetShopRadarMap",
                data: {
                    shopId: id
                },
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                async: false,
                success: function (result) {
                    localStorage.setItem("radarResult_" + id + "", JSON.stringify(result.resultList)); //存儲的時候 使用JSON.stringify()將對象解析出字符串

　　　　　　　　　　　　var resultList = result.resultList;

　　　　　　　　　　　　// 執行能力雷達圖的數據綁定及展示

} });

當鼠標再次hover能力雷達圖的時候：根據id獲取已經存儲了的數據，就不用每次都去發送請求  

var storage = localStorage.getItem("radarResult_" + id + "");
 if (storage != null) {
            var resultList = JSON.parse(storage); // 從一個字符串中解析出json對象 // 執行能力雷達圖的數據綁定及展示
  }