跟KingDZ学HTML5之八 HTML5之Web Save

======================================================
注：本文源代码点此下载
======================================================

好了,今天有事崭新的一天啊,经过前面几个课程的学习,我想大伙应该差不多已经可以写一些html5的应用了,canvas 的用途太多了,我以后和大家慢慢的谈论,呵呵

弄不好,开个专题,也可以。(*^__^*) 嘻嘻……。好了开始我们今天的课程吧。

大家都应该知道 cookies 这个东东哦,但是太郁闷了,他只有 4k  ?  真的啊,呵呵,要是工资底薪还可以。。哈哈

这节课,俺说的这个和cookies 差不多。好了,废话不多说,我们讲课。

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

localstorage - 没有时间限制的数据存储

sessionstorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

localstorage 

目前 chrome,firefox,opera,safari, ie8 都支持此属性。还有一个很重要的一点,就是

各个浏览器分配给每个 localstorage 空间至少为 5m(具体数值请看稍后讨论),对于想开始使用 html5 的人们来说,这个是个不错的开始。哈哈,5m >>>> 4k 啊

我们先来一个测试,验证浏览器是否支持 localstorage

doctype html>

html>

head>

script type="text/javascript">

function check() {

if (window.localstorage) {

alert("浏览器支持 localstorage");

}

else {

alert("浏览器不支持 localstorage");

}

}

script>

head>

body>

canvas id="mycanvas" width="200" height="200">不支持此标签 kingdz原创 http://www.cnblogs.com/hihell canvas>

input type="button" value="验证" onclick="check();" />

body>

html>

效果图---谷歌测试结果。

localstorage 使用方式非常简单

有 setitem, getitem, removeitem,key, clear 5个方法,和 length 一个属性。

好了,下面我们开始尝试一下吧。

localstorage 中都是以 key/value 的形式来存储数据的,存储的数据类型都是字符串。

如果需要其他类型,需要自行转换。我们可以使用 setitem 方法来存储数据。

也就是  localstorage.setitem(key,value);

script type="text/javascript">

function check() {

if (window.localstorage) {

try {

localstorage.setitem("name", "祖国你好!");

}

catch (e) {

alert(e);

}

}

else {

alert("浏览器不支持 localstorage");

}

alert(localstorage.getitem("name"));

}

script>

上面的这个例子就包括了我们常见的两种用法。

下面我们在介绍几个不同的用法,但是以上面的那两个为主

localstorage.key = "value";     ---------------------设置key为"value"

localstorage["key"] = "value";        ------------------设置key为"value"

localstorage.setitem("key","value");----------------设置key为"value"

var value1 = localstorage["key"];-------------------获取key的值

var value2 = localstorage.key;-------------------------获取key的值

var value3 = localstorage.getitem("key");   ------------获取b的值

 

上面的方法是等效的。不过建议大家用   setitem 和 getitem

localstorage.removeitem("key");--------------------清除key的值

如果希望一次性清除所有的键值对,可以使用clear();

localstorage.clear();

当然  localstorage有一个 key() 方法,我只在这里提示一下,就是,不知道 key 是什么了,只能用 循环 得到  也就是  localstorage.key(i)  ------------其中  i  是下标。

好了下面是一个简单的页面 访问计数器。

head>

script type="text/javascript">

function check() {

if (window.localstorage) {

try {

if (localstorage.pagecount) {

localstorage.pagecount = number(localstorage.pagecount) + 1;

}

else {

localstorage.pagecount = 1;

}

document.write("第" + localstorage.pagecount + "次访问");

}

catch (e) {

alert(e);

}

}

else {

alert("浏览器不支持 localstorage");

}

}

script>

head>

body onload="check();">

canvas id="mycanvas" width="200" height="200">不支持此标签 kingdz原创 http://www.cnblogs.com/hihell canvas>

body>

好了   完成了,大家测试一下吧,当然有各种各样的写法的。

 

下面我们说一下  sessionstorage   的简单用法

哈哈,其实废话了 ,他们的用法相同,区别在文章开始,就说了,

再写一个计数器  sessionstorage   版本的

script type="text/javascript">

function check() {

if (!sessionstorage.pagecounter)

sessionstorage.setitem('pagecounter', 0);

sessionstorage.setitem('pagecounter', parseint(sessionstorage.pagecounter) + 1);

document.write(sessionstorage.pagecounter);

}

script>

好了,大家试一下啊,关闭浏览器,打开看真相。

呵呵,前者,木有时间限制,后者浏览器关闭,就结束了。所以记得及时清空前者啊。今天得课程结束喽。

padding: 10px 10px 10px 60px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑;

font-size: 12px;' id="psignature">

作者:kingdz

出处:http://www.cnblogs.com/hihell/

关于作者:作者喜欢编程,擅长asp.net网站开发,喜欢mvc,silverlight开发,喜欢交流,喜欢创新

我的qq:860866679 msn:wangdezhen@live.com 期待有共同志向者交流进步。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题

可以通过kingdz's

email联系我,非常感谢。

标签: 跟kingdz学html5

绿色通道:好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/