查看: 16384|回复: 9

[精华] HTML5之Web存储技术

[复制链接]
论坛徽章:
63
2010广州亚运会纪念徽章:台球
日期:2010-10-18 12:43:48茶鸡蛋
日期:2013-01-09 10:59:002013年新春福章
日期:2013-02-25 14:51:24奥运会纪念徽章:帆船
日期:2013-04-02 17:07:052013年新春福章
日期:2013-04-08 17:42:48奥运纪念徽章
日期:2013-07-18 13:55:12优秀写手
日期:2013-12-18 09:29:10马上有车
日期:2014-03-20 16:13:24马上有房
日期:2014-03-20 16:14:11马上有钱
日期:2014-03-20 16:14:11
发表于 2011-1-20 14:45 | 显示全部楼层 |阅读模式
《HTML5之Web存储技术》
【版权声明】:本文属于原创,转载需征得作者chszs的同意!


HTML5之Web存储技术


Web存储是一个规范,也HTML5规范集的一部分。目前,Web存储只是一个草案,但是几个主流的浏览器(甚至是IE8)都已经实现了Web存储,只是命名有些不一样,“本地存储”或“DOM存储”。下面,我将解释什么是Web存储,以及怎样在Web程序或Web站点中使用Web存储。

Web存储诞生之前

在Web应用程序或Web站点中,以无状态的方式工作必须要保存数据和状态。在早期,我们使用缓存Cookies来保存数据。但是,使用Cookies有很多限制和不利因素。比如,对于每一个HTTP请求,只能有4KB的存储量,不能超过这个限制。Web存储就是为了解决此限制而兴起的规范。

什么是Web Storage?

Web存储是一个键/值字典,在浏览器中保存和持久化数据,即使你关闭了浏览器(从这点上看,类似于Cookies机制)。与Cookies机制不同的是,Web存储的数据是供本地浏览器使用,而不是发送到服务器端。而且,在规范中对Web存储的本地磁盘空间没做限制。但是,实际上浏览器会限制Web存储的数量。

Web存储分为两种不同的存储对象:

1、会话存储Session Storage:在窗口中同一网站的任何页面都可以访问它存储的数据。

2、本地存储Local Storage:数据可跨越多个窗口,无视当前会话,被共同访问、使用。

每个Web应用程序/Web站点都有它自己专门的存储。

Web存储API

Web存储API包括下列方法:

length – 存储的键/值对的数量。

key(n) – 返回存储的第N个键。

getItem(key) – 返回键key对应的值。如果值不存在,则返回空null。注意,返回的值是一个字符串。如果你存储的值是整数或布尔型,你需要类型转换。

setItem(key, value) – 把值插入到key键中。

removeItem(key) – 移除某个键对应的值(包含键本身)。如果键不存在,此方法什么也不做。

clear – 清空存储的键/值数据。

下面是本地存储中get和set键值项的例子:

  1. localStorage.setItem("key", "value);
  2. var val = localStorage.getItem("key");         
复制代码


还可以不使用get和set方法来存取键值数据。你可以直接把存储看做是一个带属性的类,直接访问其属性。

  1. localStorage.key = "value";
  2. var val = localStorage.key;       
复制代码


一些浏览器把Web存储看做是一个字典(或JavaScript数组),通过数组的序号访问数据:

  1. localStorage["key"] = "value";
  2. var val = localStorage["key"];         
复制代码



但是,目前序号的访问方式在规范中还没有(浏览器厂家自行定义的,未来在规范中或许会加上)。

Web存储的另一个方面是存储事件。当在Web存储中出现改变时,存储事件被触发。存储事件关联到窗口对象,无论是setItem()方法、removeItem()方法,或者是clear()方法,都会触发该事件。开发者可以为事件写一个接收事件参数的函数:

  1. if (window.addEventListener) {
  2.     window.addEventListener("storage", handleStorageEvent, false);
  3. } else {
  4.     // IE9以下的版本
  5.     window.attachEvent("onstorage", handleStorageEvent);
  6. };
  7. function handleStorageEvent(eventData) {
  8.     // 做一些工作
  9. }         
复制代码



上面例子中的eventData参数,可以保存下列数据:

key – 要修改的键;

oldValue – 要修改的键对应的旧值;

newValue – 要修改的键对应的新值;

url – 要修改的键的文档的地址;

storageArea – 存储的区域。

实战例子

下面的例子,我将使用本地存储LocalStorage,目的是保存页载入事件,并把它展现给用户:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head runat="server">
  5.     <title></title>
  6.     <script type="text/javascript">
  7.     function pageLoadCounter() {
  8.       if (!localStorage.getItem('loadCounter')) {
  9.         localStorage.setItem('loadCounter', 0);
  10.       }
  11.       localStorage.setItem('loadCounter', parseInt(localStorage.getItem('loadCounter')) + 1);
  12.       document.getElementById('counter').innerHTML = localStorage.getItem('loadCounter');
  13.     }
  14.     </script>
  15.   </head>
  16.   <body onload="pageLoadCounter()">
  17.     <form id="form1">
  18.       <p>You have viewed this page <span id="counter"></span> times.</p>
  19.       <p><input type="button" onclick="localStorage.clear();" value="Clear Storage" /></p>
  20.     </form>
  21.   </body>
  22. </html>         
复制代码



这个例子很简单,但它展示了一些API方法的用法,如getItem()、setItem()和clear()。你可以看到,存储的数据是字符串方式,必须进行类型转换后再使用。

在例子中,我把counter数据转换成整数,使用了parseInt()方法。你可以关闭浏览器或Tab页,然后打开它,查看最后持久化存储的counter数据。

总结

Web存储是一个新规范,它试图对客户端的数据进行保存。在客户端还有其他方法保存数据,比如Cookies机制或使用Google Gears框架内嵌的数据库(它基于SQLite)。

我希望我的这篇介绍性的文章有助于你以后能使用这项功能。如需进一步的信息,您可以登录W3C的网站,查看Web存储规范。
认证徽章
论坛徽章:
277
马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14马上有车
日期:2014-02-18 16:41:112014年新春福章
日期:2014-02-18 16:41:11版主9段
日期:2012-11-25 02:21:03ITPUB年度最佳版主
日期:2014-02-19 10:05:27现任管理团队成员
日期:2011-05-07 01:45:08
发表于 2011-1-21 21:54 | 显示全部楼层
好文

使用道具 举报

回复
认证徽章
论坛徽章:
277
马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14马上有车
日期:2014-02-18 16:41:112014年新春福章
日期:2014-02-18 16:41:11版主9段
日期:2012-11-25 02:21:03ITPUB年度最佳版主
日期:2014-02-19 10:05:27现任管理团队成员
日期:2011-05-07 01:45:08
发表于 2011-1-21 21:56 | 显示全部楼层
据W3C称,HTML5将取消版本号,以后不再有HTML6、7……了,只有HTML规范,且随时更新。

使用道具 举报

回复
论坛徽章:
131
乌索普
日期:2017-09-26 13:06:30马上加薪
日期:2014-11-22 01:34:242014年世界杯参赛球队: 尼日利亚
日期:2014-06-17 15:23:23马上有对象
日期:2014-05-11 19:35:172014年新春福章
日期:2014-04-04 16:16:58马上有对象
日期:2014-03-08 16:50:54马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14
发表于 2011-1-22 00:00 | 显示全部楼层
nice job

使用道具 举报

回复
论坛徽章:
23
2011新春纪念徽章
日期:2011-02-18 11:43:32祖国65周年纪念徽章
日期:2014-10-10 11:14:59马上加薪
日期:2015-02-02 09:28:17美羊羊
日期:2015-03-04 14:52:282015年新春福章
日期:2015-03-06 11:58:18美羊羊
日期:2015-05-11 13:37:05射手座
日期:2015-08-14 14:05:36巨蟹座
日期:2015-09-03 08:53:50巨蟹座
日期:2015-11-18 16:22:59金牛座
日期:2015-11-20 11:28:09
发表于 2011-1-31 21:21 | 显示全部楼层
原帖由 jieforest 于 2011-1-21 21:56 发表
据W3C称,HTML5将取消版本号,以后不再有HTML6、7……了,只有HTML规范,且随时更新。


那不是所有浏览器都被迫随时更新?

使用道具 举报

回复
论坛徽章:
13
NBA季后赛纪念徽章
日期:2017-06-19 10:47:54NBA季后赛纪念徽章
日期:2017-06-19 10:47:54NBA季后赛纪念徽章
日期:2017-06-19 10:47:54NBA季后赛纪念徽章
日期:2017-06-19 10:47:54NBA季后赛纪念徽章
日期:2017-06-19 10:47:54NBA季后赛纪念徽章
日期:2017-06-19 10:47:54
发表于 2011-2-3 08:56 | 显示全部楼层
好文

使用道具 举报

回复
论坛徽章:
350
2006年度最佳版主
日期:2007-01-24 12:56:49NBA大富翁
日期:2008-04-21 22:57:29地主之星
日期:2008-11-17 19:37:352008年度最佳版主
日期:2009-03-26 09:33:53股神
日期:2009-04-01 10:05:56NBA季后赛大富翁
日期:2009-06-16 11:48:01NBA季后赛大富翁
日期:2009-06-16 11:48:01ITPUB年度最佳版主
日期:2011-04-08 18:37:09ITPUB年度最佳版主
日期:2011-12-28 15:24:18ITPUB年度最佳技术原创精华奖
日期:2012-03-13 17:12:05
发表于 2011-2-3 23:41 | 显示全部楼层
我靠,这也是精华啊?

使用道具 举报

回复
论坛徽章:
2
祖国60周年纪念徽章
日期:2009-10-09 08:28:002011新春纪念徽章
日期:2011-02-18 11:43:32
发表于 2011-2-6 14:51 | 显示全部楼层

使用道具 举报

回复
认证徽章
论坛徽章:
104
生肖徽章2007版:猪
日期:2012-07-12 14:24:56菠菜神灯
日期:2013-05-26 22:03:18生肖徽章2007版:猪
日期:2012-07-19 11:10:12生肖徽章2007版:猪
日期:2012-07-19 11:10:12生肖徽章2007版:猪
日期:2012-07-11 19:07:11生肖徽章2007版:猪
日期:2012-07-19 11:10:12生肖徽章2007版:猪
日期:2012-07-19 11:10:12ITPUB伯乐
日期:2012-05-22 15:05:25NBA季后赛纪念徽章
日期:2013-06-21 14:52:05NBA季后赛大富翁
日期:2013-06-21 14:57:11
发表于 2012-4-9 23:29 | 显示全部楼层
不错!

使用道具 举报

回复
论坛徽章:
39
开发板块每日发贴之星
日期:2005-04-29 01:02:052011新春纪念徽章
日期:2011-01-25 15:42:152011新春纪念徽章
日期:2011-01-25 15:42:332011新春纪念徽章
日期:2011-01-25 15:42:562011新春纪念徽章
日期:2011-02-18 11:43:33管理团队成员
日期:2011-05-07 01:45:08ITPUB十周年纪念徽章
日期:2011-11-01 16:19:412012新春纪念徽章
日期:2012-01-04 11:49:542012新春纪念徽章
日期:2012-02-13 15:11:182012新春纪念徽章
日期:2012-02-13 15:11:18
发表于 2013-12-13 17:14 | 显示全部楼层
还是不错的。翻译的很好。辛苦大大的。

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表