JavaScript本地储存（2）：userData和localStorage

　　上文对cookie的知识进行了归纳，同时也提到了cookie的大小是有限制的。

cookie 是有大小限制的，每个 cookie 所存放的数据不能超过4kb，如果 cookie 字符串的长度超过4kb，则该属性将返回空字符串。——上文提要

　　如果我们需要在客户端储存比较大容量的数据，怎么办？下面给大家介绍userData和localStorage的基本知识和一些应用。先说明下为什么把两个东西扯到一起说，因为后面写了个对象，把UserData和localStorage包装到了一起O(∩_∩)O~

 

Conception [基本概念]

　　毫无疑问，无论是UserData还是localStorage都是储存在客户端磁盘的一段文本，但是两者也有很大的差异性。

　　1.UserData

　　单单说UserData是不太准确的，要实现本地储存得说“UserData Behavior”。

　UserData Behavior

—— Enables the object to persist data in user data.　　

　　这是来自微软的解释。意思是允许对象在用户页面保存数据。它适用于win32和Unix的MS IE5.0版本以上平台。

Security Zone	Document Limit (KB)	Domain Limit (KB)
Local Machine	128	1024
Intranet	512	10240
Trusted Sites	128	1024
Internet	128	1024
Restricted	64	640

　　上表是UserData的大小限制，也是从微软那里拷贝过来的，大家应该知道IE浏览器有可以设置安全等级

　　表格里的几个英文单词就对应着看吧，~\(≧▽≦)/~

　　2.localStorage

Web storage is being standardized by the World Wide Web Consortium (W3C). It was originally part of the HTML 5 specification, but is now in a separate specification. It is supported by Internet Explorer 8, Mozilla-based browsers ,Safari 4, Google Chrome 4, and Opera 10.50. As of 14 March 2011 Opera and IE9 supports the storage events.

　　上面一串*&%￥…是来自wiki的说明，跟localStorage一起的还有sessionStorage，这里就只说说localStorage。上文大意（英语水平低就是可怜）：网页储存被W3C标准化，原来本属于HTML5标准的一部分，现在已经被独立出来了。它适用于IE 8+，FF 2+，Safari 4+，chrome 4+， Opera 10.50+。

　　P.S.：sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

　　标准建议对于每个domain，localStorage大小为5M，达到限制时浏览器可以去问用户是否允许增加存储空间。

　   这是网友的对“浏览器具体能保存多少个字符”的一个测试。

测试结果：

　对英文字符和中文字符来说，测试结果并无变化，所以存储格式可能为UTF16。

　以下为测试数据(key有5个字符):

　　　　IE 9          > 4999995 + 5 = 5000000

　　　　firefox 8.0.2 > 5242875 + 5 = 5242880

　　　　chrome  16.0  > 2621435 + 5 = 2621440

　　　　safari  5.1   > 2621435 + 5 = 2621440

　　　　opera   11.60 > 1966068 + 5 = 1966073

 

 

 Grammar [语法介绍]

　　1.userData

XML       <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />
HTML     　<ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>
Scripting  object .style.behavior = "url('#default#userData')"
object .addBehavior ("#default#userData")

　　上面介绍了几种语言中userData的用法，当然这也是从MSDN拿过来的（呵呵，真心好用）。那这里我们重点放在前端常用的位置上，也就是标红了的HTML中。

　　　　1）属性:

　　　　　　expires                              设置或者获取 userData behavior 保存数据的失效日期。

　　　　　　XMLDocument                获取 XML 的引用。

　　　　2）方法:

　　　　　　getAttribute()                  获取指定的属性值。

　　　　　　load(object)                    从 userData  存储区载入存储的对象数据。

　　　　　　removeAttribute()            移除对象的指定属性。

　　　　　　save(object)                   将对象数据存储到一个 userData 存储区。

　　　　　　setAttribute()                 设置指定的属性值。

　　具体如何实现，请转到最下面封装的一个对象中~

　　2.localStorage

　　　　1）方法：

　　　　　　localStorage.getItem(key)          获取指定key本地存储的值

　　　　　　localStorage.setItem(key,value)  将value存储到key字段

　　　　　　localStorage.removeItem(key)    删除指定key本地存储的值

 

Pacaking [对象封装]

localData = {
         hname:location.hostname?location.hostname:'localStatus',
         isLocalStorage:window.localStorage?true:false,
         dataDom:null,
 
         initDom:function(){ //初始化userData
             if(!this.dataDom){
                 try{
                     this.dataDom = document.createElement('input');//这里使用hidden的input元素
                     this.dataDom.type = 'hidden';
                     this.dataDom.style.display = "none";
                     this.dataDom.addBehavior('#default#userData');//这是userData的语法
                     document.body.appendChild(this.dataDom);
                     var exDate = new Date();
                     exDate = exDate.getDate()+30;
                     this.dataDom.expires = exDate.toUTCString();//设定过期时间
                 }catch(ex){
                     return false;
                 }
             }
             return true;
         },
         set:function(key,value){
             if(this.isLocalStorage){
                 window.localStorage.setItem(key,value);
             }else{
                 if(this.initDom()){
                     this.dataDom.load(this.hname);
                     this.dataDom.setAttribute(key,value);
                     this.dataDom.save(this.hname)
                 }
             }
         },
         get:function(key){
             if(this.isLocalStorage){
                 return window.localStorage.getItem(key);
             }else{
                 if(this.initDom()){
                     this.dataDom.load(this.hname);
                     return this.dataDom.getAttribute(key);
                 }
             }
         },
         remove:function(key){
             if(this.isLocalStorage){
                 localStorage.removeItem(key);
             }else{
                 if(this.initDom()){
                     this.dataDom.load(this.hname);
                     this.dataDom.removeAttribute(key);
                     this.dataDom.save(this.hname)
                 }
             }
         }
     }

 

Usage [使用说明]

　　1.初始化

localData.initDom();

　　2.设置 key/value

localData.set(key, value);

　　3.获取 value

localData.get(key);

　　4.删除

localData.remove(key);

 

Attention [注意事项]

　　1.localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

　　2.出于安全原因，只有在同一个目录和相同的协议下才能进行持久化存储。数据是未加密的，建议你不要保存过于隐私的信息。

下文将对web离线作具体介绍。

 

Related blog [相关博文]

　　JavaScript本地储存（1）：cookie在前端 

　　Javascript本地储存（3）：离线web应用

 

Reference [参考资料]

　　1.wiki

　　2.MSDN

　　3.BeiYuu博客

　　4.网友