客户端数据存储

概要

客户端数据存储是什么？

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

 

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

响应时间中，http请求响应占用的时间不可小视，因此减少http的请求可提高用户体验，当然也能减少异常出现的几率。

 

如何使用客户端数据存储？

在我有限的知识范畴内，把客户端数据存储分为两类，一类是同页数据存取访问，一类是跨页数据存储访问。

 

同页数据存取访问

我所知道的同页数据存储有五类(脚本库是用的是jquery-1.6)：

第一种是使用<input id = "cds1" type="hidden" value="001" /> 存取数据

取：$(“#cds1”).val() 存：$(“#cds1”).val(‘other data’).

 

第二种是使用html自定义属性存取数据<div id="cds2" val="002"></div>

取：$(“#cds2”).attr(“val”) 存：$(“#cds2”).attr(“val”,”other data”);

 

第三种是使用html5中新增的属性“data-youvalue”方式存取<div id="cds3" data-val="003"></div>

    取：$(“#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中加入的<div style="behavior:url(#default#userData)" id="cds4"></div>代码如下(代码在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存储。

 

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