Web Storage
在传统的HTML时代，浏览器的主要功能只是负责展现HTML页面，即使增加了JS脚本，依然只是动态的修改HTML页面服务。因此，浏览器只是一个页面呈现工具。
如果开发者需要在客户端存储少量数据，早期只能通过Cookie来实现，但Cookie存在如下三点不足：
1. Cookie 大小被限制为4KB
2. Cookie会包含在每个HTTP请求中间向服务器发送，这样势必导致多次发送重复数据
3. Cookie 在网络传输时并未加密（除非整个应用都使用SSL），因此可能存在一些安全隐患。
HTML的出现改变了这种情况，H5新增了Web Storage功能。通过Web Storage，可以让应用程序在客户端运行时在客户端保存程序数据，从而把浏览器变成一个真正的“程序运行环境”，而不是简单的“界面呈现工具”。
Web Storage又分为两种：Session Storage 和 Local Storage
Session Storage：基于Session 的Web Storage。Session Storage保存的数据生存期限与用户Session期限相同。用户Session结束时，Session Storage保存的数据也就丢失了。
注：用户Session期限是指用户第一次访问某网站开始，到用户关闭浏览器、离开该网站的这段时间。
Local Storage：保存在用户磁盘的Web Storage，通过Local Storage保存的数据生存期限很长，除非用户或程序显示得清除这些数据，否则这些数据将会一直存在。
window对象提供了sessionStorage、localStorage两个属性，这两个属性分别代表了Session Storage和Local Storage。Session Storage和Local Storage都是Storage接口的实例。因此他们的功能和用户几乎是相同的，只是他们保存数据的生存期限不同。
Session Storage和Local Storage添加key-value和读取value：
//添加key-value
storage.setItem("myItem","Lujie");
//读取myItem对应的value
var item = storage.getItem("myItem");
如果要遍历Session Storage和Local Storage所有的key-value值，可以用for循环
for (var i=0;i<localStorage.length;i++)
{
var key = localStorage.key(i);
var value = localStorage.getItem(key);
...
}
注：目前Opera，Chrome，Safari都已经同时支持Session Storage和Local Storage，但Firefox目前只支持Local Storage，不支持Session Storage。
下面用一个实例来展示Session Storage和Local Storage的用法。实现在浏览器端提交留言并显示，数据都存储在浏览器端，不提交给服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>客户端留言板</h2>
<textarea id="msg" name="msg" cols="50" rows="8"></textarea><br />
<input type="button" value="添加留言" onclick="addMsg()" />
<input type="button" value="删除留言" onclick="clearMsg()" />
<hr />
<table style="width: 550px;">
<tr>
<th>留言内容</th>
<th>留言时间</th>
</tr>
<tbody id="show"></tbody>
</table>
<script type="text/javascript">
var loadMsg = function()
{
var tb = document.getElementById("show");
tb.innerHTML="";
for (var i=0;i<localStorage.length;i++)
{
var key = localStorage.key(i);
var date= new Date();
date.setTime(key);
var datestr = date.toLocaleDateString()+" "+date.toLocaleTimeString();
var value = localStorage.getItem(key);
var row = tb.insertRow(i);
row.insertCell(0).innerHTML = value;
row.insertCell(1).innerHTML = datestr;
}
}
var addMsg = function()
{
var msgElement = document.getElementById("msg");
var time = new Date().getTime();
//以当前时间为key来保存留言信息
localStorage.setItem(time,msgElement.value);
msgElement.value = "";
alert("保存数据");
loadMsg();
}
function clearMsg()
{
localStorage.clear();
alert("全部留言信息已被清除");
loadMsg();
}
window.onload = loadMsg();
</script>
</body>
</html>
浙公网安备 33010602011771号