前端巧用localStorage做“快取”,減少HTTP請求次數

Love Lenka 發表於 2020-02-11
前端 localStorage

場景:

載入某個頁面,JS需要透過ajax請求獲取某些資料

那麼每次重新整理頁面都會有請求,如果這些資料對實時性要求並不高,顯然這樣做並不可取。

如何減少服務端的壓力,使用localStorage可以解決此問題。

//假設id是區分於其他的要儲存的k值的一部分。
var flag=0,k=null,v_arr=[],v_time=0,v='';
var cday = new Date().getDate();
var k = window.localStorage.getItem('name_'+id);
if(k !== null) {
   v_arr = k.split("@");
   v_time = v_arr[1];
   //一天過期
   if(cday != v_time) {
    flag = 1;
   } else {
    flag = 2;
    v = v_arr[0];
    //取到v的值,直接做該做的事情。
   }
  
}
if(flag < 2) {
  //發起請求
  $.ajax(
    xx,
    xxx,
    success:function(data) {
       //儲存data有效值。
       window.localStorage.setItem('name_'+id,data.id+'@'+new Date().getDate()); 
       
//取到v的值,直接做該做的事情。

    });


}