HTML 5 Web Storage

Web Storage 存储机制是对HTML4 中 cookie 存储机制的一个改善。由于cookie存储机制有很多缺点，HTML 5 不再使用它，转而使用改良后的 Web Storage 存储机制。

用cookie存储永久数据的缺点

大小:cookie 的大小被限制在 4KB。

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

Web Storage 分为两种:sessionStorage、localStorage。

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

localStorage:将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

两者的区别在于:sessionStorage(临时保存) localStorage(永久保存)。

sessionStorage与localStorage 以key，value 形式进行保存。通过getItem方法来读取数据，通过setItem方法保存数据。

1.利用storage事件实时监视Web Storage 中的数据

   在HTML 5中，可以通过对window对象的storage事件进行监听并指定其事件处理函数的方法来定义当在其他页面中修改sessionStorage或localStorage中的值时所有执行的处理。

window.addEventListener('storage',function(event){//当sessionStorage或localStorage的值发生变动时所有执行的处理},false);

在事件处理函数中，触发事件的事件对象(event)具有如下几个属性。

event.key属性:属性值为session或localStorage中被修改的数据键值。

event.oldValue属性:在sessionStorage或localStorage中被修改前的值。

event.newValue:在sessionStorage或localStorage中被修改后的值。

event.url:为修改sessionStorage或localStorage中值的页面URL地址。

event.storageArea：为变动的sessionStorage对象或localStorage对象。