概要

客户端数据存储是什么?

简单的说就是把数据存储在特定的客户端，从而减少向服务器请求数据的次数。

为什么需要客户端数据存储?

响应时间中，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中会报错)：

//setdata 
vardS=document.getElementById("cds4"); 
dS.setAttribute("name","chenqiliang"); 
dS.save("info"); 
//getdata 
dS.load("info"); 
alert(dS.getAttribute("name")); 
//deletedata 
dS.removeAttribute("name"); 
dS.save("info");

第五种是使用sessionStorage代码如下(ie[7|8|9],ff4.0.1测试通过)：

sessionStorage.name="chenqiliang";或sessionStorage.setItem(“name”,”chenqiliang”) 
alert(sessionStorage.name);或alert(sessionStorage.getItem(“name”));

跨页数据存取访问

我所知道的有三种方式

***种方式url参数传递(个人认为不能算严格意义上的客户端数据存取)

url?parameter=value
varcql={ 
//getquerystring,ignorethecasesensitive 
//ifnomatchthenreturn"" 
//此方法由同事范占房提供 
getQueryStr:function(param){ 
varre=newRegExp("[&,?]"+param+"=([^\\&]*)","i"); 
vara=re.exec(document.location.search); 
if(a==null) 
return""; 
returna[1]; 
} 
};

第二种是cookie方式存取方式我写了一个插件请参考http://www.cnblogs.com/cqiliang/archive/2011/05/20/2052184.html,还有一类cookie是http专用cookie，javascript无法获取它的值。在c#中设置如下：

HttpCookiecookie=newHttpCookie("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';//保存数据varname=globalStorage['wrox.com'].name;//获取数据 
localStorage.setItem("name","chemdmeo");//保存数据 
localStorage.book='js';//保存数据 
localStorage.book//获取数据 
localStorage.getItem(“name”)//获取数据 
//兼容只支持globalStorage的浏览器functiongetLocalStorage(){if(typeoflocalStorage=='object'){returnlocalStorage;}elseif(typeofglobalStorage=='object'){returnglobalStorage[location.host];}else{thrownewError('Localstoragenotavailable.');}};

注：并不是所有浏览器都支持上述的dom存储。

客户端存储数据是不安全的，敏感数据不应使用这种方式存储。