HTML5 webStorage

HTML5 webStorage
cookie的问题：
1.数据大小有限
2.安全性问题：http请求中的cookie是明文传递的
3.网络负担：cookie会被附加在每个HTTP请求中

webStorage
webStorage提供两种类型的API：localStorage和sessionStorage
localStorage在本地永久性存储数据
sessionStorage存储的数据只在会话期间
方法和属性：
//var ls=localStorage;

length：唯一的属性，只读，用来获取storage内的键值对数量。
key：根据index获取storage的键名
getItem：根据key获取storage内的对应value

setItem：为storage内添加键值对
//ls.setItem(‘name’,’Byron’);
//ls.setItem(‘age’,’24’);

removeItem：根据键名，删除键值对
//ls.removeItem(‘age’);
clear：清空storage对象

var ls=localStorage;
            console.log(ls.length);//0
            ls.setItem('name','Byron');
            ls.setItem('age','24');
            console.log(ls.length);//2

            //遍历localStorage
            for(var i=0;i<ls.length;i++){
                /*
                    age : 24 
                    name : Byron 
                */
                var key=ls.key(i);
                console.log(key+' : '+ls.getItem(key));
            }

            ls.removeItem('age');


            for(var i=0;i<ls.length;i++){
                /*
                    name : Byron 
                */
                var key=ls.key(i);
                console.log(key+' : '+ls.getItem(key));
            }
            ls.clear();//0
            console.log(ls.length);

同时HTML5规定了一个storage事件，在WebStorage发生变化的时候触发，可以用此监视不同页面对storage的修改

webStorage的优势：
1. 从容量上讲WebStorage一般浏览器提供5M的存储空间，用来存储视频、图片神马的不够，但对于绝大部分操作足矣
2.安全性上WebStorage并不作为HTTP header发送的浏览器，所以相对安全
3.从流量上讲，因为WebStorage不传送到服务器，所以不必要的流量可以节省，这样对于高频次访问或者针对手机移动设备的网页还是很不错的。
这并不意味着WebStorage可以取代cookie，而是有了WebStorage后cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。所以仅仅作为本地存储解决方案WebStorage是优于cookie的。

注意：
浏览器兼容性，这个几乎是所有HTML5新特性中最容易实施的了，因为IE8+的浏览器都支持，在IE7、IE6中可以使用IE User Data实现。