HTML5的本地存储特性

本地存储是html5的一个很亮的特性，在HTML5之前的我们已经可以通过各种方法保存本地数据，基本上包括以下方法：

• HTTP Cookie 大小限制在4KB
• IE专有特性userData 大小限制在64KB
• Flash 大小限制100KB
• Google Gears 大小限制无
• HTML5 本地存储 大小限制5MB

Cookies大家都知道，存储量很小，大概也就4KB的样子，而且IE6限制每个域名20个cookies。不过Cookie的优势是通用性。几乎没有用户去禁用浏览器的Cookie功能。

userData是IE的专用特性，正是因为专用所以没人用，估计知道的人都不多。现在用的最多的是Flash的本地存储吧，空间是Cookie的25倍，大小基本够用。

后来Google发布了Google Gears，存储大小虽然没有限制，但是要装额外的插件，就这一条就把这个功能枪毙了，除非Goggle能保证 Google Gears 的装机率达到90%以上。

HTML5的出现终于解决了这一难题。首先是大小限制，W3C的给建议是每个网站5MB，这已经很大，用来存些字符串数据，绰绰有余了。其次是通用性，HTML5是一个浏览器标准，大家统一标准是迟早的事。虽说HTML5 本地存储的大小限制是5MB，但是有些浏览器在使用本地空间超出50MB时可以向用户征得同意以增加存储空间，例如Safari。对于HTML5开发者来说，5MB空间是相当够用了。

对HTML5 本地存储的支持的情况如上图， 非常出人意料的是IE在8.0的时候就支持了，这也是我在查阅相关资料时才发现的。需要注意的是，使用IE、Firefox在本地做测试的时候需要把文件上传到服务器上（或者也可以在本地搭建服务器），直接打开本地的HTML文件，是无法使用本地存储的。

如果想使用HTML5本地存储的话，为了照顾到老式浏览器，首先必须检测浏览器是否支持本地存储。在HTML5中，本地存储包括localStorage和sessionStorage，前者是一直存在本地的，后者只是在网页打开时暂时储存，窗口一旦关闭存储的信息就清空了。二者用法基本上相同，这里以localStorage为例。

 1: if(window.localStorage){ 
 

 2: alert('This browser supports localStorage'); 
 

 3: }else{  

 4: alert('This browser does NOT support localStorage'); 
 

 5: } 
 

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：

 1: localStorage.a = 3;//设置a为"3"  

 2: localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值  

 3: localStorage.setItem("b","isaac");//设置b为"isaac"  

 4: var a1 = localStorage["a"];//获取a的值  

 5: var a2 = localStorage.a;//获取a的值 
 

 6: var b = localStorage.getItem("b");//获取b的值 
 

 7: localStorage.removeItem("c");  

获取设置键值推荐使用getItem()和setItem()，清除键值对使用removeItem()。 使用clear() 清除所有的键值对。

HTML5本地存储只能储存字符串数据，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。

HTML5的本地存储提供了一个storage事件，可以监听对键值对的改变，使用方法如下：

 1: if(window.addEventListener){ 
 

 2: window.addEventListener("storage",handle_storage,false);  

 3: }else if(window.attachEvent){  

 4: window.attachEvent("onstorage",handle_storage);  

 5: }  

 6: function handle_storage(e){ 
 

 7: if(!e){e=window.event;} 
 

 8: //showStorage(); 
 

 9: }  

事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化。

• key                   String           监听到改变的键名称
• oldValue         任意              改变前的值
• newValue       任意              改变后的值
• url                     String           监听到键值改变对应的页面地址

目前javascript使用最多的数据格式是json，如果想用HTML5的本地存储来存储Json数据，直接调用JSON.stringify()将json数据转为字符串。读取出来后再调用JSON.parse()将字符串转为json格式，代码如下所示：

var details = {author:"isaac","description":"fresheggs","rating":100}; 
 

storage.setItem("details",JSON.stringify(details));  

details = JSON.parse(storage.getItem("details"));