老生常谈h5新特性:WebStorage

WebStorage
数据存储方案
Web项目中需要存储多种数据，大体上有两种存储方法：
(1)服务器端存储：
1)数据库技术：存储项目中的核心数据
2)Session技术：存储当前用户的信息
(2)客户端存储：不太紧要的与客户端有关的数据，如浏览记录、内容定制、样式定制
1)Cookie技术：使用比较繁琐、大小不能超过4KB
2)Flash技术：逐渐被淘汰
3)HTML5WebStorage技术：使用简单，大小不超过8MB
4)IndexedDB技术：客户端直接存储对象，目前还不是HTML标准技术

Web会话：指客户端浏览器从连接到某个Web服务器开始，一系列的请求-响应过程。直到客户端关闭浏览器，会话结束。

HTML5的WebStorage技术，提供了两个对象，用于在浏览器中存储客户端的访问数据：
window.sessionStorage——会话级存储:
在浏览器的内存中存储的与某个服务器间的一系列请求-响应过程中产生的数据——都是Key-Value对形式。当会话结束时(用户关闭了浏览器)，会话级数据即消失。
sessionStorage['key'] = 'value'; //存储一个数据
var v = sessionStorage['key']; //读取一个数据
sessionStorage.length //获取数据的个数
sessionStorage.setItem('key', 'value') //存储一个数据
var v = sessionStorage.getItem('key') //读取一个数据
sessionStorage.removeItem('key') //删除一个数据
sessionStorage.clear() //清除所有的数据
window.localStorage——本地/跨会话级存储：
在客户端文件系统/硬盘中存储客户端与服务器间的访问数据——都是Key-Value对形式。即使关闭浏览器，甚至关闭计算机仍然存在，否则会永久存在。
localStorage['key'] = 'value'; //存储一个数据
var v = localStorage ['key']; //读取一个数据
localStorage.length //获取数据的个数
localStorage.setItem('key', 'value') //存储一个数据
var v = localStorage.getItem('key') //读取一个数据
localStorage.removeItem('key') //删除一个数据
localStorage.clear() //清除所有的数据