写点什么

傲游勾三股四解析 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:073133
用户头像

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

关注

评论

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

那些你不知道的炫酷按钮交互效果

南城FE

CSS 前端 动画 交互设计 按钮

高并发之负载均衡

源字节1号

软件开发

大数据调度平台Airflow(四):Airflow WebUI操作介绍

Lansonli

airflow 9月月更

前端必读:如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件

葡萄城技术团队

JavaScript Excel canvas 数据导入 数据导出

还不会搭建自己的产品帮助中心?来看看这个

Baklib

本周四晚19:00知识赋能第八期第2课丨ArkUI自定义组件

OpenHarmony开发者

OpenHarmony

OKR之剑·理念篇02: OKR布道之旅

vivo互联网技术

团队管理 OKR 目标管理

SPI机制是什么,懂了

知识浅谈

spi 9月月更

EasyNLP玩转文本摘要(新闻标题)生成

阿里云大数据AI技术

自然语言处理 深度学习 开源技术 文本检测 企业号九月金秋榜

国民粮油品牌益海嘉里首个天猫超级品牌日交出完美答卷

依赖项安全检测新利器:Scorecard API

SEAL安全

开源项目 开源安全 依赖项管理 开源组件 企业号九月金秋榜

Chrome操作指南——入门篇(七)console中的await和log

Augus

Chrome开发者工具 9月月更

Flomesh 多租户 Ingress Controller

Flomesh

Service Mesh 服务网格

MASA MAUI Plugin 安卓蓝牙低功耗(一)蓝牙扫描

MASA技术团队

.net MASA MAUI Xamarin

NGINX 的未来:回到开源的初心

NGINX开源社区

nginx Kubernetes nginx 开源版 NGINX Kubernetes Gateway NGINX Amplify

行业方案|“机场”行业智能运维解决方案介绍

云智慧AIOps社区

解决方案 智能运维 运维管理 智能运维AIOps 监控安全

Orbeon form 的安装和使用教程

汪子熙

typescript SAP Hybris form 9月月更

一起瓜分20万奖金!第三届火焰杯软件测试大赛开始公开选拔!

测吧(北京)科技有限公司

测试

活动报名|9月24日 Apache Flink Meetup · 北京站,Flink 1.16 新版本发布!

Apache Flink

大数据 flink 流计算 活动 实时计算

堡垒机全称是什么?是运维安全审计系统吗?

行云管家

网络安全 堡垒机

Chrome操作指南——入门篇(六)console.injector

Augus

Chrome开发者工具 9月月更

ScrumMaster可不是项目经理!

ShineScrum

Scrum ScrumMaster 项目经理

从零到一了解APP速度测评

百度Geek说

App 网络 企业号九月金秋榜 速度测评

Baklib|7步教你写出实用的在线产品手册

Baklib

产品 产品文档 产品手册 在线协作

本周预告:资深架构师解读多架构体系下的内核与系统开发等技术演讲 | 第47-48期

OpenAnolis小助手

开源 ebpf sig 龙蜥大讲堂 普华

如何用AR Engine开发一个虚拟形象表情包?

HarmonyOS SDK

AR

Hinton等谈深度学习十年;PyTorch落地Linux基金会的影响;机器学习界的“GitHub”|AI系统前沿动态

OneFlow

人工智能

PostgreSQL逻辑复制解密

京东科技开发者

数据库 postgresql 数据迁移 WAL 逻辑复制

一条sql了解MYSQL的架构设计

京东科技开发者

MySQL 数据库 架构 innodb 存储引擎

中国移动政企科创专题:耕“云”不辍,厚积薄发

极客天地

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