使用WebStorage的API
下面我们讲解如何使用WebStorage的API。目前WebStorage的API有如下这些：
• length – 获得当前webstorage中的数目。
• key(n) – 返回webstorage中的第N个存储条目
• getItem(key) –返回指定key的存储内容，如果不存在则返回null。注意，返回的类型是String字符串类型。
• setItem(key, value) –设置指定key的内容的值为value
• removeItem(key) 根据指定的KEY，删除键值为key的内容。
• clear – 清空webstorate的内容。
可以看到，webstorage API的操作机制实际上是对键值对进行的操作。下面是一些相关的例子：
var val = localStorage.getItem("key");
当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：
var val = localStorage.key;
在有的浏览器中，甚至支持使用如下的方式进行设置：
var val = localStorage["key"];
要注意的是，sessionStorage和localStorage的使用方法是一样的，所以例子这里就不再详细给出。
WebStorage的相关事件
当我们使用localstorage存储数据时，在其他浏览器窗口或者浏览器的选项卡中，会发生storage事件，如果用户打开不同的窗口(或者浏览器选项卡)访问同一网址时，在不同的窗口或选项卡之间，会进行数据同步，如下图：
▲
当用户修改了localstorage中的数据内容时，如将新的数据值赋值给原来的KEY时，会发生storage事件，事件的响应代码如下：
console.log('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue);
}, false);
其中,event.key为原来旧的key的名称，event.oldValue为旧的key所对应的值，event.newValue为新的key的值。
storage的事件机制，在Firefox 5, Safari 5, Chrome 12, Opera 10.5 和 IE9中将得到支持。
一个localstorage的例子
最后，我们来看一个localstorage的小例子，例子运行后，当每次加载刷新页面时，会显示当前已刷新的次数给用户，代码如下：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function pageLoadCounter() {
if (!localStorage.getItem('loadCounter')) {
localStorage.setItem('loadCounter', 0);
}
localStorage.setItem('loadCounter', parseInt(localStorage.getItem('loadCounter')) + 1);
document.getElementById('counter').innerHTML = localStorage.getItem('loadCounter');
}
</script>
</head>
<body onload="pageLoadCounter()">
<form id="form1">
<p>
You have viewed this page <span id="counter"></span> times.
</p>
<p>
<input type="button" onclick="localStorage.clear();" value="Clear Storage" />
</p>
</form>
</body>
</html>
在上面的代码中在pageLoadCounter()事件中，首先判断localstorage中是否有localCounter的值存在，如果没的话，则初始化为0，然后每当刷新页面时，使用setItem方法重新设置了loadCounter的值，令其加1，最后再显示在页面中。
WebStorage目前存在的问题
目前，WebStorage的机制实现方面，其安全性依然跟cookies一样，还是有令人担忧的地方，所以建议敏感数据是不要直接通过web storage机制进行保存。
小结
在本文中， 对HTML5的新增的webstorage存储机制进行了初步的简单介绍，介绍了sessionStorage及localStorage的特点和应用场合，以及它们的使用的API和事件，分析了其中的不足之处。相信随着HTML5标准的逐渐完善，各浏览厂商的不断努力下，Webstorage机制在不久的将来将更加完善。
