概要

客户端数据存储是什么?

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

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

响应时间中，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

【编者推荐】

1. 如何解决PHP+MySQL出现乱码的现象
2. 教你如何利用MySQL学习MongoDB之安装篇
3. MySQL配置时提示无法连接到MySQL本地服务器
4. MySQL中的NoSQL插件
5. 论MySQL数据库中两种数据引擎的差别