概要
客户端数据存储是什么?
简单的说就是把数据存储在特定的客户端，从而减少向服务器请求数据的次数。
为什么需要客户端数据存储?
响应时间中，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
【编者推荐】
