cookies,sessionStorage和localStorage的区别

联系：

sessionStorage和localStorage一样，都是用来缓存客户端缓存信息。
他们都只能存储字符串类型对象。

区别：

localStorage的生命周期是永久的，除非用户主动清除浏览器UI上存储的localStorage信息，否则它将永久存在。
sessionStorage的生命周期是存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据随着窗口或标签页的关闭而被清空。因此其仅仅是会话级别的本地存储。
不同的浏览器之间是无法共享sessionStorage和localStorage信息的，同一浏览器的不同页面之间可以共享localStorage信息（页面属于相同域名和端口），但不同页面或标签页之间无法共享sessionStorage的信息。注意：页面及标签页是指顶级窗口，如果一个标签页包含多个iframes标签，且它们属于同源页面，它们之间是可以共享sessionStorage信息的。

HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

同源的判断规则：

http://www.test.com

https://www.test.com （不同源，因为协议不同）

http://my.test.com（不同源，因为主机名不同）

http://www.test.com:8080（不同源，因为端口不同）

本文主要来讲解Web Storage

我们知道，在HTML4中可以使用cookie在客户端保存诸如用户名等简单的用户信息，但是，通过长期的使用，你会发现，用cookie存储永久数据存在以下几个问题：

1.大小：cookie的大小被限制在4KB。

2.带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

3.复杂性：要正确的操纵cookie是很困难的。

针对这些问题，在HTML5中，重新提供了一种在客户端本地保存数据的功能，它就是Web Storage。

具体来说，Web Storage又分为两种：

1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

到目前为止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的浏览器支持sessionStorage与localStorage的使用。