16.1　　Web Storage

　　　　在传统的HTML时代，浏览器的主要功能只是负责展现HTML页面，即使增加了JavaScript脚本，依然只是为动态地修改HTML页面服务。因此

　　　　浏览器只是一个“界面呈现工作”。

　　　　如果开发者需要在客户端存储少量数据，早起只能通过Cookie来实现，但Cookie存在如下3点不足：

　　　　　　Cookie的大小被限制为4KB。

　　　　　　Cookie会包含在每个HTTP请求中向服务器发送，这样势必导致多次发送重复数据。

　　　　　　Cookie在网络传输时并未加密（除非整个应用都使用SSL），因此可能存在一些安全隐患。

　　　　HTML5的出现改变了这种局面，HTML5新增了Web Storage功能。通过Web Storage，可以让应用程序在客户端运行时在客户端保存程序数据，

　　　　从而把浏览器变成一个真正的“程序运行环境”，而不是简单地“界面呈现工具”。

16.1.1　　Storage接口

　　　　Web Storage可以分为如下两种：

　　　　　　Session Storage：基于Session的Web Storage。Session Storage保存的数据生存期限与用户Session期限相同，用户Session结束时，

　　　　　　　　　　　　　　　Session Storage保存的数据也就丢失了。

　　　　　　Local Storage：保存在用户磁盘的Web Storage。通过Local Storage保存的数据生存期限很长，除非用户或程序显示的清楚这些数据，

　　　　　　　　　　　　　　否则这些数据将会一直存在。

　　　　window对象里提供了sessionStorage、localStorage两个属性，这两个属性分别代表了Session Storage和Local Storage。Session Storage

　　　　和Local Storage都是Storage接口的实例，因此它们的功能和用户几乎都是相同的，只是它们保存数据的生存期限不同而已。

　　　　W3C组织为Storage制定的接口定义如下：

　　　　　　interface Storage

　　　　　　{

　　　　　　　　readonly attribute unsigned long length;

　　　　　　　　DOMString? key(unsigned long index);

　　　　　　　　getter DOMString getItem(DOMString key);

　　　　　　　　setter createor void setItem(DOMString key,DOMString value);

　　　　　　　　deleter void removeItem(DOMString key);

　　　　　　　　void clear();

　　　　　　}

　　　　从上面接口定义可以看出，Storage提供了如下属性和方法。

　　　　　　length：该属性返回该Storage里保存了多少组key-value对。

　　　　　　key(index)：该方法返回Storage中第index个key。

　　　　　　getItem(key)：该方法返回Storage中指定key对应的value。

　　　　　　set(key,value)：该方法用于向Storage存入指定的key-value对。

　　　　　　removeItem(key)：该方法用于从该Storage删除指定key对应的key-value对。

　　　　　　clear()：该方法用于删除该Storage中所有的key-value对。

16.1.2　　使用Storage存储、读取数据

　　　　代码示范：

　　　　　　//脚本代码

　　　　　　var saveStorage = function(id)

　　　　　　{

　　　　　　　　//如果勾选了复选框，则使用Local Storage保存数据

　　　　　　　　//否则使用Session Storage保存数据

　　　　　　　　var checked = document.getElementById("local").checked;

　　　　　　　　var storage = checked? localStorage : sessionStorage;

　　　　　　　　var target = document.getElementById(id);

　　　　　　　　storage.setItem("message",target.value);

　　　　　　}

　　　　　　var loadStorage = function(id)

　　　　　　{

　　　　　　　　//如果勾选了复选框，则使用Local Storage保存数据

　　　　　　　　//否则使用Session Storage保存数据

　　　　　　　　var checked = document.getElementById("local").checked;

　　　　　　　　var storage = checked ? localStorage : sessionStorage;

　　　　　　　　var target = document.getElementById(id);

　　　　　　　　//读取数据

　　　　　　　　target.innerHTML =  storage.getItem("message");

　　　　　　}

　　　　　　//html代码

　　　　　　<input type="text" id="input"/>

　　　　　　使用Local Storage保存：<input type="checkbox" id="local"/>

　　　　　　<div id="show"></div>

　　　　　　<input type="button" value="http://www.mamicode.com/保存数据" onclick="saveStorage(‘input‘);"/>

　　　　　　<input type="button" value="http://www.mamicode.com/读取数据" onclick="loadStorage(‘show‘);"/>