弥补Web开发缺陷,实战HTML5中存储API


在HTML5中,新增加了方便客户端存储的API,这将比传统的cookies的功能更加强大。尽管目前HTML5标准还在不断草拟和修改中,还没最终定稿,但越来越多的浏览器已经开始对其进行支持了...

在HTML5中,新增加了方便客户端存储的API,这将比传统的cookies的功能更加强大。尽管目前HTML5标准还在不断草拟和修改中,还没最终定稿,但越来越多的浏览器已经开始对其进行支持了。


在HTML5中,新增加了方便客户端存储的API,这将比传统的cookies的功能更加强大。尽管目前HTML5标准还在不断草拟和修改中,还没最终定稿,但越来越多的浏览器已经开始对其进行支持了。这意味者,在HTML5中,用户可以使用HTML5专门为存储方面提供的API: sessionStorage和localStoreage。在本文中将初步探讨这两种API的功能。

  COOKIES的限制和缺陷


  首先,让我们来回顾下cookies。Cookies的出现可谓大大推动了Web的发展,但它既有优点也有一定的缺陷。Cookies的优点在于,它可以允许我们在登陆网站时,记住我们输入的用户名和密码,这样在下一次登陆时就不需要再次输入了,达到自动登陆的效果。


  另一方面,cookie的安全问题也日趋受到关注,比如cookie由于存储在客户端浏览器中,很容易受到黑客的窃取,安全机制并不是十分好。


  另外一个问题是cookies存储数据的能力有限。目前在很多浏览器中规定每个cookie只能存储不超过4KB的限制,这估计是来自


  1997年rfc2109中的规定(http://tools.ietf.org/html/rfc2109)。目前的浏览器大多允许用户创建30到50个cookies,所以一旦cookie的内容超过4KB,唯一的方法是重新创建。


  此外,cookie的一个缺陷是每次的HTTP请求中都必须附带cookie,这将有可能增加网络的负载。


  HTML5中的Web存储


  在HTML5中新出现的Web 存储机制正好弥补了cookies的缺点,Web存储机制在以下两方面作了加强:


  首先,对于web开发者来说,它提供了很容易使用的API接口,通过设置键值对即可使用,下文中会有例子谈到。


  其次,在存储的容量方面,可以根据用户分配的磁盘配额进行存储,这就可以在每个用户域下存储不少于5-10MB的内容。这就意味者,用户可以不仅仅存储session了,还可以在客户端存储用户的设置偏好,本地化的数据,离线的数据,这对提高效率是很有帮助的。


  而web存储更提供了使用Javascript编程的接口,这将使得开发者可以使用Javascript,在客户端做很多以前要在服务端才能完成的工作。目前,各主流浏览器已经开始对web存储的支持,如下图:
 


  Session存储和本地化存储


  在HTML5的web存储中,分为session存储和本地化存储两类。


  sesssion存储只能针对单一的浏览器进程或单一页面的数据,换句话说,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。


  而localStorage则是可以不受浏览器窗口进程的限制,只要使用localStorage保存了的数据,即使在新打开了浏览器窗口或者将浏览器关闭后,数据依然保存。网站在页面加载完毕后可以通过Javascript来获取这些数据。


  要注意的是,以上两类web存储机制,在不同类型的浏览器之中还是不能互相访问的,比如在Firefox中用localstorage存储的时候,是不能在IE中去访问读取的。


  何时去使用它们


  使用localStorage存储机制的场合是十分多的,比如你的应用中是一个在线的任务应用,需要用户在线填写大量的表单和数据,而且在指定的时间间隔后,才把这些数据发送到服务端,又或者是在线购物时,用户的购物车(这时可以在购物车中保存更多的数据了,等用户下次再登陆时,购物车中的数据依然是存在的)。又或者开发的离线应用,用户在离线状态下把数据填写好,等在线的时候,再一次性把数据提交。


  除此之外,更有研究表明,可以使用localStorage去存储图片等二进制数据(图片需要经过Base64编码),其效率大为提高。


  那么什么时候需要使用sessionStorage呢?在有些情况下,如果你需要当浏览器窗口关闭或者不需要数据在当用户新打开一个窗口依然能被访问的情况下,可以使用sessionStorage。比如在运行某个游戏的两个实例或者在运行多个单元测试时,不希望数据之间有冲突,这时可以使用sessionStorage。

更多 html5 相关资讯

HTML5改变开发者开发移动Web程序的方式

HTML5正在改变着开发者开发移动Web程序的方式。但是,却不能成为移动应发展的终结。如果是的话,那么就不会有“我应该为自己的服务开发本地应用还是Web应用?”这样的问题。在pi

HTML5中国在UC应用中心上线

HTML5中国在UC应用中心上线

北京时间2月20日HTML5中国移动版在UC应用中心正式上线。HTML5中国作为国内最大的HTML5中文门户,致力于HTML5技术的研究和分享,旨在推动HTML5技术在中国的发展。在移动互联

HTML5游戏开发工具PlayMobi支持Facebook支付

  AppMobi发布了公测版PlayMobi,这是一种HTML 5游戏开发工具,用于开发iOS,Android,Facebook游戏,同样为不同的支付系统提了“1touch”跨平台应用内购买方案。   AppMobi说:P

傲游3新版全新升级,加强HTML5动画性能

中国领先的全球软件服务公司傲游( www.maxthon.com )宣布,最新正式版傲游3.3.4.4000,将全面提升对HTML5的支持,增强对 2D/3D的图像动画的处理技术,带给全球用户一个全新的浏览视觉

一周资讯精选(02.13—02.19)

一周资讯精选(02.13—02.19)

2012.02.13—2012.02.19资讯精选 2012.02.13资讯精选 1. ,磊友是中国最早从事HTML5商业游戏开发的公司,其于2月13日推出了全球首款完全HTML5的大型网络游戏——《黎明

Chrome移动版浏览器HTML5页面评测‎

Chrome移动版浏览器HTML5页面评测‎

HTML5最初诞生于PC端,很大程度依赖于硬件,现如今手机/平板硬件飞速发展,所以这个已然不是瓶颈了,谷歌移动版Chrome支持HTML5网址、HTML5视频,并且具备具备硬件加速canvas能力

HTML5打造简易播放器:Chrome运行.mp3

HTML5打造简易播放器:Chrome运行.mp3

如今HTML已经是比较热门的了,各种关于HTML5的应用程序、游戏、应用商店等也如火如荼的展开了。各大主流浏览器也纷纷开始支持HTML5标准,以备打赢新的一轮浏览器大战。 话不

Mozilla今年将推出跨平台HTML5应用商店

Mozilla今年将推出跨平台HTML5应用商店

北京时间2月23日早间消息,Mozilla周三宣布,他们将在今年晚些时候推出跨平台HTML5应用商店,应用提交申请将在下周举行的移动世界大会上开放。   Mozilla的初衷是专注

HTML5是不是解决跨平台问题的终极密钥

HTML5是不是解决跨平台问题的终极密钥

不同平台的生态圈、技术障碍等壁垒阻碍了开发者快速发展,而HTML5虽被寄予厚望,但目前还缺乏有说服力的产品,HTML5的潜能仍需在探索中被继续挖掘。 Beau Hindman在解析自己理想

HTML5:新闻网站的新选择

HTML5是HTML语言的更新版,被业内公认为是近十年来 Web 标准最大的飞跃,将成为下一代的Web语言。随着新技术的发展,移动阅读已经成为一种不可逆转的趋势。智能手机、平板电脑则

更多 web开发 相关资讯

HTML5改变开发者开发移动Web程序的方式

HTML5正在改变着开发者开发移动Web程序的方式。但是,却不能成为移动应发展的终结。如果是的话,那么就不会有“我应该为自己的服务开发本地应用还是Web应用?”这样的问题。在pi

Lanyrd如何用HTML5创建出优秀的移动Web应用

Lanyrd如何用HTML5创建出优秀的移动Web应用

当谈到HTML5移动web应用发展的时候,很多开发者都在等待确定前景一片光明以后才愿意尝试使用它。确实,HTML5移动web应用有改变整个移动应用生态系统的潜力,但至少在现在,本地应用

HTML5推进移动Web应用开发

  应用模式的转变注定了传统Web模式已不再满足用户的需求与体验,尤其在苹果终端+Apps模式持续火热的情况下,Web应用向移动终端的渗透变得异常重要。让Web应用实现移动愿景,谁

看好HTML5,Financial Times Web App开发公司被FT收购

看好HTML5,Financial Times Web App开发公司被FT收购

出于对HTML5前景的信心,商业报刊公司Financial Times收购了为其开发移动Web App的研发公司。总部位于London的Assanka被FT收购,但是具体的收购价格则尚未对外透露。 收购Ass

Mozilla进军移动领域,B2G项目主打HTML5

1月10日消息,在刚刚结束的火狐深圳体验分享活动中,来自Mozilla台湾办公室的B2G项目负责人James Ho先生首次和数百位火狐社区的朋友们分享了B2G项目的概况和进展。

Web Apps 展望:HTML5将推动Web App发展

从HTML 5开始兴起之后,在移动平台上Web Apps是否能够和Native Apps一较高下,甚至Web Apps是否可能取代Native Apps的纷争开始兴起。不管现在Web Apps的能力如何,在业界,对于Web

调查:HTML5移动Web技术受开发者追捧

调查:HTML5移动Web技术受开发者追捧

  HTML5技术作为新一代的网页技术标准,不仅在PC端获得了用户的一致认可,在移动互联网领域同样深受爱戴。参加调查的开发者中,有54.10%的开发者表示十分看好HTML5技术在移动We

2011年Web开发领域回顾与展望

2011年Web开发领域回顾与展望

对Web开发者来说2011年无疑是“风景不错”的一年,HTML5得到了Adobe与微软的认可、CSS3也日益成熟、谷歌推出了新结构化编程语言Dart、等等。Web开发领域的发展让人惊

Sencha Touch 2:一行代码就将Web应用变本地应用

Sencha Touch 2:一行代码就将Web应用变本地应用

据国外媒体报道,应用开发工具提供商Sencha计划对基于HTML 5的移动开发框架Sencha Touch进行更新,通过在应用程序中添加一行代码就可将Web应用变成本地应用。该新版Sencha Touc

2011:HTML5的六大趋势

2011:HTML5的六大趋势

HTML5正在彻底改变技术人员开发Web应用的方式。无论是在桌面还是移动,这个未来的语言和标准都已经不再遥远。移动领域最热门的争议——“Web应用还是原生应用?”将

更多 api 相关资讯

HTML5有着不可限量的发展前景

现在的HTML5就像当年崭露头角时的Ajax,有人在做,但不知道叫它什么。最近,苹果在HTML5上大做文章,而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yah

Android与iOS:谁更适合HTML 5?

Fiercedeveloper于2月3日刊载了一篇探讨iOS与Android平台性能的文章,作者Aditya Bansod在文中将Android 4和iOS 5做了一番比较。2011年12月上旬,Google发布了Android移动操作

2012年HTML5:14个大胆预言

2012年HTML5 14个大胆预言   不管是Zynga、Facebook、Google、微软、苹果,还是众多新兴的初创公司,都已拉开了HTML5大战的序幕。今天这里要介绍的是2012年HTML 5发展的14个

2012年HTML5的14大预测

编者按:本文原作者是Spaceport.io创始人Ben Savage,Spaceport.io是一个面向移动游戏开发者的本地Javascript和HTML 5平台。文章编译过程中,内容有少量删改。不管是Zynga

开发者必备 揭秘谷歌8大热点新工具

开发者必备 揭秘谷歌8大热点新工具

近日,谷歌针对开发者推出了8个最新的工具。其中一个是谷歌全面更新了BigQuery分析引擎,它包括新的图形用户界面、新的API等新功能。另外,谷歌也推出了把Flash文件转换成HTM

PhoneGap开发初体验:用HTML5技术开发本地应用

PhoneGap开发初体验:用HTML5技术开发本地应用

怎样在智能手机(以及其他移动设备)上将HTML5应用程序作为本地程序运行?虽然现在Web技术发展得相当快,但是想要在浏览器上运行一个几兆大小的应用程序还是非常困难的,因为

Google开放Oath 2.0测试平台“OAuth 2.0 Playground”

Google开放Oath 2.0测试平台“OAuth 2.0 Playground”

自今年3月开始,Google开始在所有的Google Web API上全面部署OAthu 2.0。这也是Google推荐访问Google Web API的授权机制。由于下一代授权标准OAthu 2.0尚处于草案阶段而且并

Sencha Touch 2 开发者预览版发布,基于HTML5的移动应用框架

Sencha宣布发布Sencha Touch 2的开发者预览版。此次发布带来了性能方面的重大改进及重要特性:原生打包。 Sencha Touch是专门为移动设备开发应用的JavaScript框架,也是第一个

Chrome 11开测 新增HTML5语音输入API

Chrome 11 Beta公测版日前发布,尽管与Chrome 10时隔不久,不过Chrome 11并非只是数字上的升级,此次Beta版中就新增了HTML5语音输入API和GPU加速3D CSS两大功能。此外,你还能在该

实战HTML 5中存储API

实战HTML 5中存储API

HTML5中,新增加了方便客户端存储的API,这将比传统的cookies的功能更加强大。尽管目前HTML5标准还在不断草拟和修改中,还没最终定稿,但越来越多的浏览器已经开始对其进行支持了。