返回上一页
客服QQ
客服QQ
一切从沟通开始……
跟KingDZ学HTML5之八：本地储存
作者：睿美印象网站建设工作室 发布日期：2012-11-21
好了，今天有事崭新的一天啊，经过前面几个课程的学习，我想大伙应该差不多已经可以写一些HTML5的应用了，Canvas 的用途太多了，我以后和大家慢慢的谈论，呵呵
弄不好，开个专题，也可以。(*^__^*) 嘻嘻……。好了开始我们今天的课程吧。
大家都应该知道 Cookies 这个东东哦，但是太郁闷了，他只有 4K ？ 真的啊，呵呵，要是工资底薪还可以。。哈哈
这节课，俺说的这个和COOKIES 差不多。好了，废话不多说，我们讲课。
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
localStorage
目前 chrome,firefox,opera,safari, IE8 都支持此属性。还有一个很重要的一点，就是
各个浏览器分配给每个 localStorage 空间至少为 5M（具体数值请看稍后讨论），对于想开始使用 HTML5 的人们来说，这个是个不错的开始。哈哈，5M >>>> 4k 啊
我们先来一个测试，验证浏览器是否支持 localStorage
XML/HTML Code复制内容到剪贴板
<! 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);
JavaScript Code复制内容到剪贴板
<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 是下标。
好了下面是一个简单的页面 访问计数器。
XML/HTML Code复制内容到剪贴板
<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 版本的
JavaScript Code复制内容到剪贴板
<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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
弄不好，开个专题，也可以。(*^__^*) 嘻嘻……。好了开始我们今天的课程吧。
大家都应该知道 Cookies 这个东东哦，但是太郁闷了，他只有 4K ？ 真的啊，呵呵，要是工资底薪还可以。。哈哈
这节课，俺说的这个和COOKIES 差不多。好了，废话不多说，我们讲课。
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
localStorage
目前 chrome,firefox,opera,safari, IE8 都支持此属性。还有一个很重要的一点，就是
各个浏览器分配给每个 localStorage 空间至少为 5M（具体数值请看稍后讨论），对于想开始使用 HTML5 的人们来说，这个是个不错的开始。哈哈，5M >>>> 4k 啊
我们先来一个测试，验证浏览器是否支持 localStorage
XML/HTML Code复制内容到剪贴板
<! 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);
JavaScript Code复制内容到剪贴板
<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 是下标。
好了下面是一个简单的页面 访问计数器。
XML/HTML Code复制内容到剪贴板
<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 版本的
JavaScript Code复制内容到剪贴板
<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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- HTML5 特性的检测：离线Web应用
- 第五天 超链接伪类
- 跟KingDZ学HTML5之二：再见Audio和Video
- 10个非常棒的Ajax及Javascript实例资源网站
- 4、【视频】格式化标签的默认样式
- css图片按钮代码
- 28个必须知道的HTML5新特性
- HTML5版3D实验室四：3D引擎重中之重
- 网站建设布局中css强制html不换行方法，英文不断词！
- 仿AS语法来写HTML5—第1章，显示一张图片
- css中的单位介绍
- Firefox下margin-top问题
- 99款高质量免费(X)HTML/CSS模板
- 新手应该知道的10条css技巧
- HTML5漫谈（3）--HTML5发展亟需解决的8个问题
- 分享25个优秀的 HTML5 开发教程
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
