綜述客戶端數據存儲
概要
客戶端數據存儲是什么?
簡單的說就是把數據存儲在特定的客戶端，從而減少向服務器請求數據的次數。
為什么需要客戶端數據存儲?
響應時間中，http請求響應占用的時間不可小視，因此減少http的請求可提高用戶體驗，當然也能減少異常出現的幾率。
如何使用客戶端數據存儲?
在我有限的知識范疇內，把客戶端數據存儲分為兩類，一類是同頁數據存取訪問，一類是跨頁數據存儲訪問。
同頁數據存取訪問
我所知道的同頁數據存儲有五類(腳本庫是用的是jquery-1.6)：
***種是使用 存取數據
取：$(“#cds1”).val() 存：$(“#cds1”).val(‘other data’).
第二種是使用html自定義屬性存取數據
取：$(“#cds2”).attr(“val”) 存：$(“#cds2”).attr(“val”,”other data”);
第三種是使用html5中新增的屬性“data-youvalue”方式存取
取：$(“#cds3”).data(“val”) 存：$(“#cds3”).data(“val”,”other val”),需要注意的是如果data-val有初始值，$(“#cds3”).data(“val”)會丟失前面的0，可以使用$(“#cds3”).attr(“data-val”)方式解決這個問題.但如果是通過$(“#cds3”).data(“val”,”001”)方式設置后再取，再用$(“#cds3”).data(“val”)取則不會丟失。
第四種方式是在ie中加入的
代碼如下(代碼在ie[7|8|9]測試通過，在ff4.0.1中會報錯)：
- // set data
- var dS = document.getElementById("cds4");
- dS.setAttribute("name", "chen qi liang");
- dS.save("info");
- // get data
- dS.load("info");
- alert(dS.getAttribute("name"));
- // delete data
- dS.removeAttribute("name");
- dS.save("info");
第五種是使用sessionStorage代碼如下(ie[7|8|9],ff4.0.1測試通過)：
- sessionStorage.name = "chen qi liang";或sessionStorage.setItem(“name”,”chen qi liang”)
- alert(sessionStorage.name); 或alert(sessionStorage.getItem(“name”));
跨頁數據存取訪問
我所知道的有三種方式
***種方式url參數傳遞(個人認為不能算嚴格意義上的客戶端數據存取)
- url?parameter=value
- var cql ={
- // get querystring, ignore the case sensitive
- // if no match then return ""
- // 此方法由同事范占房提供
- getQueryStr: function(param) {
- var re = new RegExp("[&,?]" + param + "=([^\\&]*)", "i");
- var a = re.exec(document.location.search);
- if (a == null)
- return "";
- return a[1];
- }
- };
第二種是cookie方式存取方式我寫了一個插件請參考http://www.cnblogs.com/cqiliang/archive/2011/05/20/2052184.html,還有一類cookie是http專用cookie，javascript無法獲取它的值。在c#中設置如下：
- HttpCookie cookie = new HttpCookie("test");
- cookie.HttpOnly = true; // http 專用cookie
- cookie.Values["item1"] = "value1";
- cookie.Values["item2"] = "value2";
- HttpContext.Current.Response.Cookies.Set(cookie);
第三種方式是globalStorage(在html5中被localStorage替換):
- globalStorage['wrox.com'].name = 'wrox';//保存數據 var name = globalStorage['wrox.com'].name;//獲取數據
- localStorage.setItem("name", "chemdmeo");//保存數據
- localStorage.book = 'js'; //保存數據
- localStorage.book//獲取數據
- localStorage.getItem(“name”) //獲取數據
- //兼容只支持globalStorage的瀏覽器 function getLocalStorage() { if(typeof localStorage == 'object') { return localStorage; } else if(typeof globalStorage == 'object') { return globalStorage[location.host]; } else { throw new Error('Local storage not available.'); } };
注：并不是所有瀏覽器都支持上述的dom存儲。
客戶端存儲數據是不安全的，敏感數據不應使用這種方式存儲。
原文鏈接：http://www.cnblogs.com/cqiliang/archive/2011/05/24/2055642.html
【編者推薦】
