HTML5存储方式总结

HTML5之前，主要使用Cookies存储。Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。Cookie具有不可跨域名性。

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除
• sessionStorage - 针对一个 session 的数据存储

sessionStorage与localStorage在使用方法上是相同的，区别在于sessionStorage在关闭页面后即被清空，而 localStorage则会一直保存。

localStorage代码举例

<script type="text/javascript">
if (localStorage.visitCount)
{
  localStorage.visitCount = Number(localStorage.visitCount) + 1;
}
else
{
  localStorage.visitCount = 1;
}
alert("访问次数:" + localStorage.visitCount);
</script>

API接口

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);