cookies，sessionStorage 和 localStorage 的区别

http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/

http://book.51cto.com/art/201106/270499.htm

http://www.cnblogs.com/blackbird/archive/2012/06/18/2553718.html

软件编程希望通过一些手段来持久化的存储一些有用的数据。对于网络化编程，一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。随着HTML5的出现，web开发又有了两种选择：Web Storage和Web SQL Database.

Web Storage有两种形式：LocalStorage（本地存储）和sessionStorage（会话存储）。这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

1.与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此x相比cookie来说能够存储更多的数据，大概5M左右。

2.LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。

    LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页），

    sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。

注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。

3、使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

Storage类的相关成员如下：

成员名方法参数描述length属性获取存储数据的条数

key(n)　　　　

n:索引值根据索引值，返回键名getItem(key)key:键名根据键名，获取数据值setItem(key,value)key:键名 value:键值根据键名和键值设置数据项，如果键名已经存在，则覆盖值removeItem(key)key:键名根据键名删除一个数据项clear()无清空当前的Storage对象其用法：

参数设置很简单，如下例：

localStorage.setItem('age', 40); 

访问一个存储的数据一样很容易：

var age = localStorage.getItem('age'); 

可以这样删除一个特定的键值对：

localStorage.removeItem('age'); 

或者删除所有的键值对：

localStorage.clear(); 

当然以上的都可以用sessionStorage代替，但是窗口关闭后数据丢失。

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5. Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6. Web Storage 的 api 接口使用更方便。