写点什么

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

  • 2012-06-18
  • 本文字数:1830 字

    阅读完需:约 6 分钟

在 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 ),获取实时的活动信息!

2012-06-18 03:073094
用户头像

发布了 156 篇内容, 共 53.4 次阅读, 收获喜欢 7 次。

关注

评论

发布
暂无评论
发现更多内容

【Spring Boot实战与进阶】Controller的使用及获取请求参数的示例

Java 程序员 后端

【SpringMVC笔记】拦截器 ,java设计模式及实践百度云

Java 程序员 后端

详细架构设计文档模板(笔记)

张祥

网络篇夺命连环12问

冇先生

堪称神级的阿里巴巴“高并发”教程《基础+实战+源码+面试+架构》

Java 编程 程序员 高并发

【云计算】云的七大分类定义说明

行云管家

云计算 公有云 私有云 云资源

【SpringBoot系列】配置多环境配置文件,hadoop环境搭建教程

Java 程序员 后端

彻底说透简单工厂那些你没有关注过的细节

Tom弹架构

Java 架构 设计模式

纳尼?华为首席架构师只用434页笔记,就将网络协议给拿下了

编程 程序员 面试 网络协议

重磅|Apache ShardingSphere 5.0.0 即将正式发布

SphereEx

数据库 ShardingSphere Meetup Apache ShardingSphere DateBase

【Spring 持久层】Spring 与 Mybatis 整合,spring教程极客学院

Java 程序员 后端

专题|防宕机,Pulsar 跨机房复制了解一下?

Apache Pulsar

云原生 中间件 Apache Pulsar 消息系统 防宕机 跨地域复制

智能的统一哲学

木铎

人工智能 机器学习 智能

IM开发基础知识补课(十):大型IM系统有多难?万字长文,搞懂异地多活!

JackJiang

架构设计 即时通讯 灾备 IM 异地多活

【Spring Cloud 8】熔断与限流Sentinel,java现在的主流技术

Java 程序员 后端

【Spring 工厂】反转控制与依赖注入,spring集成mybatis原理面试题

Java 程序员 后端

Kafka 3.0 重磅发布,来看下值得关注的新功能

大数据技术指南

kafka 11月日更

【SpringMVC笔记】Ajax 入门,linux编程基础李养群课后答案

Java 程序员 后端

前端Node.js面试题

CRMEB

恒源云(GPUSHARE)_云GPU服务器如何使用Conda?

恒源云

深度学习

[架构实战营] 模块三作业

张祥

架构实战营

就这?彻底搞懂单例模式

蝉沐风

Java 面试 设计模式 单例模式

【Spring Cloud 2】注册中心Eureka,java架构面试题spring原理

Java 程序员 后端

深入理解 TCP 拥塞控制

拍乐云Pano

TCP 音视频 RTC TCP通信

以闭包方式实现一个Controller层打印日志的切面

LSJ

aop 闭包 切面

还在刷面试题?NO!这份阿里内网Java面试通关手册才是你急需的

Java spring 面试 JVM mybatis

Python代码阅读(第56篇):获取列表的前n个最大/最小值

Felix

Python 编程 列表 阅读代码 Python初学者

【Spring 基础注解】对象创建相关注解,java开发实战经典答案百度云

Java 程序员 后端

【SpringMVC 笔记】Json 交互处理(1),面试官都被搞懵了

Java 程序员 后端

【SpringMVC 笔记】Json 交互处理,顺丰java社招面试

Java 程序员 后端

腾讯AI专家整理最全Python学习体系(视频+源码+案例+路线)

小Q

Python AI 面试 爬虫

傲游勾三股四解析HTML5中的Web Storage使用_JavaScript_贾国清_InfoQ精选文章