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="保存数据" onclick="saveStorage(‘input‘);"/>
<input type="button" value="读取数据" onclick="loadStorage(‘show‘);"/>
8月19号=》436页-440页,布布扣,bubuko.com