使用js實現前端快取

2021-07-06 04:38:39 字數 1602 閱讀 8508

使用js實現前端快取的工具類,在支援html5的瀏覽器上優先使用html5的storage進行快取

呼叫方式為(例如儲存):

sy.cookiestring/('key','value')

此處使用的第三方js庫為:

jquery.cookie.js

jquery.js

json2.js

var sy = sy || {};

sy.data = sy.data || {};// 用於存放臨時的資料或者物件

/** * 0:當前視窗

* 1:所有視窗共享

* 2:指定網域名稱結尾允許訪問,配置domain,需要支援html5

*/sy.getdatascope = function()

/** * 範圍

*/sy.getdomain = function()

/** * 當前視窗快取

*/sy.setitem = function(key,value);

} sy.data[key]=value; }}

/** * 當前視窗獲取快取

*/sy.getitem = function(key)

return sy.data[key]; }}

/** * 快取資料

* @param key 鍵

* @param value 值

*/sy.cookie = function(key,value)elseelse

}break;

case 2:

if(globalstorage)//如果域物件不可用則儲存為全域性

case 1:

if(localstorage)elseelse

}break;

} function storage(obj,key,value)else

} }}/**

* 僅用於儲存cookie,會將物件轉為jsonstring

*/sy.cookiestring = function(key,value)

}/**

* 僅用於讀取cookie,會將jsonstring轉為物件

*/sy.cookieparse = function(key)

return json.parse(cv);

}/**

* 清除所有快取

*/sy.clearcookies = function()else;

} break;

case 2:

if(globalstorage)//如果域物件不可用則清理全域性

case 1:

if(localstorage)else

if(cookies.length > 0)}}

} break; }}

/** * 刪除cookie

*/sy.removecookie = function(key)else

break;

case 2:

if(globalstorage)//如果域物件不可用則刪除全域性cookie

case 1:

if(localstorage)else

break;

}}

使用JS實現前端快取

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

前端快取的使用

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

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

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