BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

傲游勾三股四解析HTML5中的Web Storage使用

| 作者 贾国清 关注 0 他的粉丝 发布于 2012年6月19日. 估计阅读时间: 6 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

在6月14日,由天翼空间·开发者工厂主办,InfoQ协助策划的第九期专家讲坛活动上,来自傲游浏览器前端开发经理赵锦江( @勾三股四)向大家分享了在网页数据存储、Web Storage概念及实战中的开发技巧等内容。

HTML5中的Web Storage讲稿下载

早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中。HTML5的出现,极大地增加了开发人员的开发灵活度:

  • Web Storage(Key-value 相对简单易用)
  • Web SQL Database(用SQL访问本地数据库)
  • Indexed DB(存取JSON数据的数据库)
  • File system(存取文件)
  • Application Cache(缓存网络资源)

Web Storage由两部分组成,sessionStorage和localStorage,sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储;localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。其他特性还包括:

  • localStorage
    • 以域名为单位进行数据划分
    • 同域下的所有页面一起共享这些数据
    • 对数据的改动会导致同时共享这些数据的其他页面触发storage事件
  • sessionStorage
    • 以每个“顶级页面(top-level browsing context)”为单位
    • 在所有同域的“子页面”中共享这些数据(对数据的改动会触发storage事件)
    • 为所有同域的以下“顶级页面”拷贝这些数据(通过超链接新打开的页面、通过脚本新打开的页面)

接下来赵锦江分别从基本操作、高级操作和简化操作等三个方面介绍了以上两种存储方式的使用。同时还介绍了storage事件的触发和常用事件对象。在最后的实战部分,分别结合JSON API、String.spilit和Array.join这三种方式进行了讲解。

在问答环节,赵锦江回答了网友的提问,详细信息如下:

问:HTML的Web Storage技术较之前存储技术有什么改进和优势呢?
答:和传统的Cookies相比,Web Storage是专为本地存储而设计的,有更友好的接口设计和更大的存储空间,也不会伴随每次HTTP请求到服务器。

问:Webkit中离线存储是如何实现的?
答:不同的浏览器内部实现起来确实是不同的,但实现结果对于Web开发者而言是相同的,没有什么特别之处——这也是标准的意义所在。

问:HTML5相对本地应用来说效率不是很高吧?它用的多是不是适用性广的原因?
答:HTML5最主要的特性有两个:一个是快速实现,一个是跨平台。效率方面,随着技术的不断进步,相信和传统应用的差距会逐步缩短。

问:数据存储于本地缓存中吗?也就是说我们无法将较为大量的数据放在Web Storage里边了?
答:localStorage会把数据存在硬盘上,即使重启电脑之后依然存在。

问:存储在本地的数据未加密而且永远不会过期,极易造成隐私泄漏。老师一般这个问题是怎样解决的呢?
答:这样设计localStorage其实是把数据的控制权交给了程序开发者。这样灵活度更高,如果希望页面关掉就清除数据,建议使用sessionStorage

问:请问老师,在浏览器下Session数据怎样实现跨域访问?
答:理论上是无法跨域的,这也是出于对数据保护方面的考虑。但基于这些理论的设计,还是有一些技巧,可以做到类似“跨域”的效果。这里不一一列举。

问:请问老师Web Storage有什么优势呢?我在做存储的时候为什么要选择Web Storage而不适用Cookie呢?
答:不同的浏览器内部实现起来确实是不同的,但实现结果对于Web开发者而言是相同的,没有什么特别之处——这也是标准的意义所在。

问:Storage有哪些浏览器不支持呢?或者说现在支持的有哪些浏览器呢?
答:给你推荐一个网址:http://caniuse.com/#feat=namevalue-storage 都在这里了。

关于讲师

赵锦江,网名勾三股四,毕业于西北工业大学,2007年加入傲游浏览器并工作至今,现任前端开发部经理。

关于专家讲坛

天翼空间开发者社区专家讲坛是天翼空间开发者社区(www.189works.com)2012年针对开发者推出的一项提升专业能力的系列讲座,每周四晚,邀请移动互联网开发领域的权威专家,通过语音频道专题讲座,线上论坛访谈,以及微博、QQ群线上同步直播的形式,为社区的开发者用户提供系统的技术讲座,答疑,以及运营知识方面的培训。

往期内容回顾

关于专家讲坛更多详情,请浏览官方网站。InfoQ也会对后续的活动进行跟踪报道。

关于社区活动的更多详情,欢迎查看InfoQ维护的社区活动日历,也欢迎关注InfoQ官网微博(@InfoQ),获取实时的活动信息!

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT