HTML5 Web存储，了解它之前先说说老朋友Cookie，可真是电脑里的藏宝阁，红极一时。但现在，科技飞速进步，保护自己的隐私变得愈发关键，Cookie已经有点跟不上趟了哟。别急，HTML5现在给咱们提供了更高级，更快，功能更多的新利器——HTML5 Web存储！
HTML5 Web 存储的意义
这就来聊聊什么是HTML5网页存储呗？简单来说，就是说用浏览器里的HTML5功能，可以把数据直接存在你自家电脑，就不用通过服务器传输了。这种方式很稳妥又快速，而且网页速度更快。不再需要那种小气吞声的Cookie了，HTML5储存大容量数据，一点开网站，信息马上就能看到并使用~
localStorage 与 sessionStorage
HTML5还有点让人惊呆的是，有两个储存小能手：一个叫LocalStorage，这家伙能帮你把网页上的东西永久保存在电脑里，不用操心过期问题，除非你亲手删掉它们；另一个就是SessionStorage，就像一个短期仓库，只在你最近开的那一个浏览器窗口或标签页里管用，关了窗户以后，里面的好戏就结束咯！
检测浏览器支持
想要用HTML5网页存东西？首先要确定下你的浏览器支不支持localStorage和sessionStorage！localStorage就像是你自己的小金库，随心所欲存取各种数据，持久性棒极了，过很久也不会失效！
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}localStorage 对象
实例解析
记住我们举的这个例子，它能让你更明白HTML5网络存储到底是咋回事儿。其实，就是在网页上找到”sitename”这玩意儿，把它的数字放入合适的位置。以后想去哪个网址可不就简单多了？直接查一下这个记录就能搞定！
localStorage.sitename="PHP中文网教程";
document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
API方法介绍
不论是 localStorage 还是sessionStorage，用得溜溜的，超简单的！记住那三个招式——setItem(), getItem()和removeItem（），很快就懂怎么整理你的小本本了。要增加、修改或者消掉，通通手到擒来喔~
类型转换与数值处理
提醒下在实际操作中，我们常用字符串记录键值对信息。这时就要根据具体情况，设法转换成数字等其他类型，这样信息处理会更精准快速！
// 存储
localStorage.sitename = "PHP中文网教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;
sessionStorage 的特点
localStorage.removeItem(""sitename");
跟LocalStorage不同！SessionStorage这货就是个私人小助理，专门帮你记些零碎事儿。只要你关了浏览器窗口，它记住的东东就全没了，特别适合短期使用的数据。
创建与访问 sessionStorage
搞定Cookie Session Storage 简直小菜一碟！只需利用 setItem()和getItem()来存取数据就好，关机前记得删去不需要的空信息就大功告成！这下放心大胆地用！
总结与展望
哎哟喂，HTML5网络存储好牛，用得特舒服，效果超乎想象！掌握这个，我们能更高效更多样地改进网站，让大家有个炫酷又好用的体验，处理数据也是容易得很~
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
评论0