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

在 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 ），获取实时的活动信息！