H5中的LocalStorage和sessionStorage

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

一、 Web Storage

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

Web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

二、sessionStorage和localStorage的比较

• 相同点

1. 存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
2. 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
3. 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

• 不同点

1.sessionStorage将数据保存在session中，为临时保存，浏览器关闭也就没了；

2.localStorage则为永久保存，一直将数据保存在客户端本地

3.localStorage在同源页面内共享，sessionStorage在同源页面内不共享

三、 sessionStorage

sessionStorage（会话存储）将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据，只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。

但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

四、localStorage

localStorage（本地存储）将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用，只要不手动删除数据就不会消失。 

 五、使用

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）
 
window.localStorage.getItem(key);//获取指定key的数据

window.localStorage.removeItem(key);//删除指定key的数据
 
window.localStorage.clear();//清空所有的存储数据
 
 
 
window.sessionStorage.setItem(key,value);
 
window.sessionStorage.getItem(key);
 
window.sessionStorage.removeItem(key);
 
window.sessionStorage.clear();

 例如：

在A页面先存储数据：

var name = result.name  //声明变量存储数据
localStorage.setItem('key',name);  //将变量name存储到name字段

在B页面获取数据：

var naid = localStorage.getItem('key'); //获取指定key本地存储的值