Web Storage

客户端存储历史

最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。

userData是IE的东西。现在用的最多的是Flash吧，空间是Cookie的25倍，基本够用。再之后Google推出了Gears。到了HTML5把这些都统一了，官方建议是每个来源(协议、域、端口)5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。

Web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

Web Storage 使用：
WebStroage包括localStorage和sessionStrorage。
拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互(如认证)，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

浏览器支持情况
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

Web Storage 作用

Web存储目的是克服cookie带来的一些限制，当数据需要被严格控制在客户端上，无须持续将数据发回给服务器。 利用本地数据，减少网络传输，大型网站，脚本样式等都会放本地， 弱网络，高延迟，低带宽，尽量本地数据。

• 提供一种在cookie之外存储会话数据的途径
• 提供一种存储大量可以跨会话存在的数据的机制
• 只要能被序列化成字符串，或转化为字符串的都可以存到localstorage。
  

1. Storage类型

Storage类型提供最大的存储空间来存储key/value
getItem(name) ： 根据指定的名字获取对应的值。
key(index) : 获得index位置值的名字
removeItem(name): 删除name指定的名值对
setItem(name，value) 为指定name设置一个对应的值。
其中getItem removeItem setItem方法可以直接调用，也可以通过Storage对象间接调用。

本质：
每个Item(存储的名值对)都是作为属性存储在Storage对象上的，所以可以通过 点语法和方括号语法访问属性。 可以通过delete操作符删除。 不过建议用方法。
Stroage只能存储字符串，非字符串的数据在存储之前会被转为字符串。
实际上我们是通过localStorage来访问Storage的方法
sessionStorage 和localStorage都是Storage的实例。 Storage不能直接访问这些方法

 var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');

2.sessionStorage对象

存储特定于某个会话的数据，该数据只能保持到浏览器关闭。 这个对象也会在浏览器关闭后消失(这个sessionStorage对象。)
sessionStorage中的数据可以跨越页面刷新而存在，如果浏览器支持，崩溃后重启之后依然可用(IE不行)。
限制：
因为sessionStorage对象绑定于某个服务器会话，所以当文件在本地运行时是不可用的。
存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到，对多页面有限制。

不同浏览器写入数据的不同：
FF和webkit实现了同步写入，所以添加到存储空间中的数据是立刻被提交的。 而IE的实现是异步写入的，所以设置数据和将数据实际写入磁盘会有延迟。 此时你去getItem访问这个数据可能就会返回undefined，或者不是预期的值！

对于IE8解决方法：

sessionStorage.begin();
sessionStorage.name="xxx";
sessionStorage.book="yyy";
sessionStorage.commit();

这段代码确保了name和book的值调用commit后立刻被写入磁盘。 调用begin是为了确保这段代码被执行的时候不会发生其他磁盘写入操作。 对于大量数据，就要考虑事务形式的方法。

获取数据
除了getItem获取数据的方法，还有另外一种：
这个方法就不需要知道sessionStorage里面的键值是什么，就可以返回所有的key value！

for(var i=0,len=sessionStorage.length;i<len;i++){
    var key=sessionStorage.key(i);
    var value=sessionStorage.getItem(key);

}

for in也可以。

删除数据

delete sessionStorage.name
sessionStorage.removeItem('book');

clear()清除所有的键值对

session针对会话的小段数据存储。 如果需要跨越会话存储，localStorage更好

3. localStorage对象

大部分都支持~
存储形式 ： key–>value
过期：永久存储，永不失效，除非手动删除
大小：为每个域名分配5M
作为HTML5规范取代了 之前的globalStorge (由FF实现的存储跨越会话的数据，要确定哪些域可以访问，存储空间限制在那个域名，子域名也不行，限制：域名 协议 端口)

而localStorage事先指定了规则：
访问同一个localStorage必须使用同一种协议，同一个域名（子域名无效），同一个端口。
(相当于globalStorage[location.host])

usage：

//存储数据
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
//获取数据
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
//清除数据
localStorage.removeItem("c");//清除c的值

4. 功能检测

检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

5. storage事件

对Storage对象的任何修改，都会在文档上触发storage事件。 但通过属性或setItem保存数据，delete或removeItem删除数据，都会触发：
这个事件的even 事件对象：

• domain 发生变化的存储空间域名
• key 设置或删除的键名
• newValue 如果是设置值，则是新值，如果是删除值，则是null
• oldValue 键被更改之前的值

IE8只是实现了domian属性

EventUtil.addHandler(document,'storage',function(event){
    //....
    if(!event){
        event=window.event;
        //...
    }
});

6. 限制

使用限制： localstorage只存客户端，一般服务端无法访问
1. 存储更新策略，过期控制。
2. 子域名之间不能共享存储数据，cookie则可以共享存储数据。 必须同一个来源：协议 域名 端口 。 每个来源有自己固定大小的空间。
3. 超出存储大小之后如何存储？(FIFO LRU)， 不同浏览器对于每个来源的限制不同，大多数PC浏览器是5MB,, IOS和Android是 2.5MB
4. server端如何取到，一般跟在http get post相应参数后面