文章目录
- 导语
- 何为HTML5 Web 存储？
- 浏览器支持
- 本地存储对象
- localStorage 本地存储介绍
- sessionStorage 会话存储介绍
- localStorage本地存储与sessionStorage会话存储的区别实例
- 结语
导语
本篇文章中，将会为各位读者介绍HTML5的web存储。
何为HTML5 Web 存储？
HTML5web存储是一种比cookie更好的本地存储方式。至于为什么这么说，在HTML5问世之前，本地存储的都是在cookie中，包括每一个服务器的请求。但是我们需要更加安全与快速的存储方式，web存储则满足这些需求，而且在不影响网站性能的情况之下能够将大量数据存在本地。
但是相对的，web存储与cookie不同，存储限制相对而言更大（至少需要5MB），数据以键或者值对存在，web网页的数据只允许该网页访问使用。
浏览器支持
IE8版本以上，Firefox, Opera, Chrome, 和 Safari支持Web 存储。
本地存储对象
HTML5为客户端提供了两个存储数据的对象：
localStorage：本地存储，存储没有截止时间的数据，可以手动删除，用于长期保存网页数据。
sessionStorage：会话存储，针对session存储的临时数据，在关闭标签页后就会自动删除。
还请注意：因为有部分浏览器由于各种各样的原因，可能不支持localStorage 和 sessionStorage，因此，在使用web存储前，我们需要检查浏览器是否支持它们。
if(typeof(Storage)!=="undefined")
{
// 支持 localStorage sessionStorage 对象，运行此处代码
// 其他功能代码
} else {
// 不支持 web 存储，显示此处的消息。
}localStorage 本地存储介绍
localStorage 对象存储的数据没有时间期限。无论是一天后，一周后，甚至时隔数年，存储在其中的数据依旧是可以使用的。
下面是示例：
// 存储
localStorage.setItem("cname", "中亿丰数字");
// 查找
document.getElementById("result").innerHTML = "公司名：" + localStorage.getItem("cname");使用 key=“cname” 和 value=“中亿丰数字” 创建一个 localStorage 键/值对。
检索键值为 “cname” 的值然后将数据插入 id=“result” 的元素中。
当然，你也可以写成如下所示：
// 存储
localStorage.cname = "中亿丰数字";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;移除 localStorage 中的 “cname” :
localStorage.removeItem("cname");不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
提示: 键/值对通常以字符串存储，当然也可根据需要调整。
下面的实例是用户点击按钮的次数。以及代码中的字符串值转换为数字类型:
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 点击了按钮 " + localStorage.clickcount + " 次 ";sessionStorage 会话存储介绍
sessionStorage 对象和localStorage 对象类似，但是它与 localStorage 对象的区别在于，sessionStorage 对象只对一个session进行数据存储。当用户关闭标签页或者浏览器窗口之后，存储的数据也会随之删除。
这是在当前session中对按钮的计数：
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="点击了该按钮 " + sessionStorage.clickcount + " 次 ";localStorage本地存储与sessionStorage会话存储的区别实例
function count() {
if (sessionStorage.clickcount)
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
else
sessionStorage.clickcount=1;
var zyf_now = document.getElementById("zyf_now");
zyf_now.innerHTML = "目前点击次数：" + sessionStorage.clickcount;
}
function count2() {
if (localStorage.clickcount)
localStorage.clickcount=Number(localStorage.clickcount)+1;
else
localStorage.clickcount=1;
var zyf_total = document.getElementById("zyf_total");
zyf_total.innerHTML = "总共点击次数：" + localStorage.clickcount;
}将两者放一块对比，各位读者不难发现其中的差别。本地存储中的按钮即便关闭会话窗口也会计数，而会话存储中的按钮关闭窗口就会停止计数。
结语
本篇文章粗略地介绍了web存储相关的知识，希望各位读者能够通过文中的例子体会到两个存储对象的区别。
