綜述客戶端數(shù)據(jù)存儲(chǔ)
概要
客戶端數(shù)據(jù)存儲(chǔ)是什么?
簡(jiǎn)單的說(shuō)就是把數(shù)據(jù)存儲(chǔ)在特定的客戶端，從而減少向服務(wù)器請(qǐng)求數(shù)據(jù)的次數(shù)。
為什么需要客戶端數(shù)據(jù)存儲(chǔ)?
響應(yīng)時(shí)間中，http請(qǐng)求響應(yīng)占用的時(shí)間不可小視，因此減少http的請(qǐng)求可提高用戶體驗(yàn)，當(dāng)然也能減少異常出現(xiàn)的幾率。
如何使用客戶端數(shù)據(jù)存儲(chǔ)?
在我有限的知識(shí)范疇內(nèi)，把客戶端數(shù)據(jù)存儲(chǔ)分為兩類，一類是同頁(yè)數(shù)據(jù)存取訪問(wèn)，一類是跨頁(yè)數(shù)據(jù)存儲(chǔ)訪問(wèn)。
同頁(yè)數(shù)據(jù)存取訪問(wèn)
我所知道的同頁(yè)數(shù)據(jù)存儲(chǔ)有五類(腳本庫(kù)是用的是jquery-1.6)：
***種是使用 存取數(shù)據(jù)
取：$(“#cds1”).val() 存：$(“#cds1”).val(‘other data’).
第二種是使用html自定義屬性存取數(shù)據(jù)
取：$(“#cds2”).attr(“val”) 存：$(“#cds2”).attr(“val”,”other data”);
第三種是使用html5中新增的屬性“data-youvalue”方式存取
取：$(“#cds3”).data(“val”) 存：$(“#cds3”).data(“val”,”other val”),需要注意的是如果data-val有初始值，$(“#cds3”).data(“val”)會(huì)丟失前面的0，可以使用$(“#cds3”).attr(“data-val”)方式解決這個(gè)問(wèn)題.但如果是通過(guò)$(“#cds3”).data(“val”,”001”)方式設(shè)置后再取，再用$(“#cds3”).data(“val”)取則不會(huì)丟失。
第四種方式是在ie中加入的
代碼如下(代碼在ie[7|8|9]測(cè)試通過(guò)，在ff4.0.1中會(huì)報(bào)錯(cuò))：
- // 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測(cè)試通過(guò))：
- sessionStorage.name = "chen qi liang";或sessionStorage.setItem(“name”,”chen qi liang”)
- alert(sessionStorage.name); 或alert(sessionStorage.getItem(“name”));
跨頁(yè)數(shù)據(jù)存取訪問(wèn)
我所知道的有三種方式
***種方式url參數(shù)傳遞(個(gè)人認(rèn)為不能算嚴(yán)格意義上的客戶端數(shù)據(jù)存取)
- 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方式存取方式我寫(xiě)了一個(gè)插件請(qǐng)參考http://www.cnblogs.com/cqiliang/archive/2011/05/20/2052184.html,還有一類cookie是http專用cookie，javascript無(wú)法獲取它的值。在c#中設(shè)置如下：
- 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';//保存數(shù)據(jù) var name = globalStorage['wrox.com'].name;//獲取數(shù)據(jù)
- localStorage.setItem("name", "chemdmeo");//保存數(shù)據(jù)
- localStorage.book = 'js'; //保存數(shù)據(jù)
- localStorage.book//獲取數(shù)據(jù)
- localStorage.getItem(“name”) //獲取數(shù)據(jù)
- //兼容只支持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存儲(chǔ)。
客戶端存儲(chǔ)數(shù)據(jù)是不安全的，敏感數(shù)據(jù)不應(yīng)使用這種方式存儲(chǔ)。
原文鏈接：http://www.cnblogs.com/cqiliang/archive/2011/05/24/2055642.html
【編者推薦】
