使用JS實現前端快取

2021-08-08 13:28:17 字數 957 閱讀 2972

在前端瀏覽器中,有些資料(比如資料字典中的資料),可以在第一次請求的時候全部拿過來儲存在js物件中,以後需要的時候就不用每次都去請求伺服器了。對於那些大量使用資料字典來填充下拉框的頁面,這種方法可以極大地減少對伺服器的訪問。這種方法特別適用於使用iframe的框架。

具體實現思路和方法:

建立乙個cache.js檔案:

1、前端頁面,定義那些資料需要一次性拿到前端快取,定義乙個物件來儲存這些資料:

/*

* * 定義需要在使用者登入的時候獲取到本地的資料字典類別 */

var clscodes =; /*

* * 獲取資料字典到本地 */

var dicts;

2、前端頁面,定義乙個函式來呼叫後台介面獲取資料,然後儲存到本地快取物件(dicts)中。

function

getdicts()

}, 'json');

}

在主頁面載入的時候呼叫這個方法一次性獲取資料並快取起來。這樣,以後需要同樣的資料,就直接從本地物件dicts中獲取了。

後端controller:

3、定義乙個介面,根據前端的請求,查詢資料庫(或查詢伺服器快取,如下面例子中)獲取資料返回給前端:

/*

* * 根據多個分類編號獲取多個字典集合

* @param clscodes

* @return }, ...} */

@suppresswarnings()

@responsebody

public resultbean getdictlist(@requestparam(value = clscodes, required = true

) string clscodes)

}else

rb.setdata(dictmap);

return

rb;}

使用js實現前端快取

使用js實現前端快取的工具類,在支援html5的瀏覽器上優先使用html5的storage進行快取 呼叫方式為 例如儲存 sy.cookiestring key value 此處使用的第三方js庫為 jquery.cookie.js jquery.js json2.js var sy sy sy.d...

前端快取的使用

在伺服器上,通過響應頭上新增 set cookie選項,瀏覽器收到響應時會自動儲存。例如 expires為過期時間 set cookie zzz cookie xyz expires wed,21 oct 2015 07 28 00 gmt 也可以通過js 來操作cookie document.co...

前端協商快取強快取如何使用 前端強快取和協商快取

快取是前端面試的乙個常見知識點,下面對於實際專案中如何進行快取的設定給出方案。強快取和協商快取 瀏覽器快取是瀏覽器將使用者請求過的靜態資源儲存到電腦本地磁碟中,當再次訪問時,就可以直接從本地快取中載入而不需要去向伺服器請求了。但是快取也有缺點,如果服務端資源更新了,客戶端沒有強制重新整理的情況下,看...