【HTML5】Web Storage简析

标签: html5 web storage | 发表时间:2013-03-14 16:05 | 作者:程序猿小卡
出处:http://www.cnblogs.com/

什么是Web Storage?

web storage是HTML5规范中提出的一种本地存储解决方案。在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式

  • cookie:兼容性最好,但也有不少问题,下面会简单做下对比

  • 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性

session storage、local storage的区别

session storage的作用在于:将数据存储在本地,只有 当次会话同域的页面才能访问,这意味着:

  • 会话一旦结束,之前存储的数据就销毁,不可以访问(比如关闭标签或窗口)

  • 页面存储的数据,只有同域的页面能够访问;比如同域的两个页面demo-1.html、demo-2.html,当前打开了demo1.html,并存储了一段数据A(细节略);接着在当前窗口,切换到demo-2.html,demo2.html里的脚本可访问A;如果此时切换到的不是demo-2.html,而是其他域的页面,则无法访问A

local storage则比session storage少了一些限制,一个页面里设置的数据,只要同个域下的页面均可以访问。如果不手动删除数据,理论上这些存储的数据是会一直存在的

相对cookie有哪些优势

关于web storage相对于cookie的优势,网上有不少分析了,这里简单列出关键的几点:

  • 存储空间更大:cookie的大小限制从数K到数M不等,虽然HTML5规范里没有明确说明浏览器需提供多大的本地存储空间,但一般支持的浏览器都会提供数M以上的存储空间

  • 数据仅存储在本地,在与服务器发送交互的时候不会传送到服务器:当向服务器发起请求时,之前设置的cookie会随着请求一起发送到服务器,这对带宽来说是一种浪费,尤其同个域下有多个业务时这种带宽浪费的问题尤为明显(曾见过某业务在cokkie里设置了将近1M的数据,god~)

  • 更加友好的接口,操作数据更加方便:原生API操作cookie很麻烦很麻烦~

  • 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的。体验过同域下cookie相互覆盖导致的问题的童鞋应该深有体会

API简单介绍

1个属性:length;5个方法:setItem、getItem、removeItem、clear

length:

  • 当前Storage对象中存储的key/value对的总数

setItem(key, value)

  • 将key对象的值设置为value,value为String类型

  • 当设置失败,比如用户将本地存储禁用,或者本地存储超过限制的大小时,抛出QuotaExceededError错误

getItem(key)

  • 返回key对应的值,如不存在,返回null

removeItem(key)

  • 如果key在storage中存在,将key对应的key/value对从storage对象中删除;注意:不会返回删除的 value

  • 如果key在storage中不存在,不进行任何处理

clear()

  • 清除Storage对象上所有的key-value值

key(index)

  • 返回index对应位置的key值,当index>length时,返回null

  • 往storage对象上添加key-value值,通过key(index)取回的键是不固定的,跟通过for...in遍历普通的对象一样,依赖于浏览器的实现

storage事件

根据标准的说明,当本地存储的数据发生变化时候,会触发storage事件,对应的事件对象包含了以下属性:

  • key:被更新或删除的键
  • oldValue:键更新前对应的value,如果键原先不存在,则oldValue为null
  • newValue:键更新后的value,如果键被删除,则newValue为null
  • url:storage事件发生的源(页面url)
  • storageArae:一个引用,指向当前发生变化的localStorage或sessionStorage

在storage事件的实现上,各浏览器出现了前端工程师喜闻乐见的兼容性问题,主要体现在两个方面:

  • 触发事件的对象
  • 事件触发时,对应事件对象支持的属性(TODO)

兼容性问题

1、触发的条件

The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).

When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

简单概括:当本地存储的数据被修改的时候,会触发storage事件,并将事件放进任务队列里去

  • storage不会冒泡,也不可取消
  • 在所有本地存储被影响到的window对象上触发

上面引用的那段文字似乎没什么特别之处。按照上面的描述假设我当前打开了两个标签,分别访问的是同个域下的页面,如www.example.com下的demo-1.html,demo-2.html

在demo-1.html上有如下代码

window.onstorage = function(){
console.log('storage changed in demo-1');
};

setTimeout(function(){

window.localStorage.intro = 'my name is casper';

}, 3000);

在demo-2.html上有如下代码

window.onstorage = function(){
console.log('storage changed in demo-2');
};

3秒后会发生神马事情?按照预计,demo-1.html、demo-2.html页面的storage都被触发,并打印相关日志,但实际上,只有demo-2.html页面有日志打印出来

“storage changed in demo-2”

在最初的时候有些困惑,于是向群里的兄弟请教,Hax帮忙给了回答,如下

2、事件触发的对象

When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object's localStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired, as described below.

简单概括:假如Storage对象X被修改,如添加、删除ke/value等,则在所有受到影响的文档的window对象上触发storage事件, 除了X所在的那个文档 于是之前的现象就解释得通了,如果光看storage event的描述,很容易就掉坑里,很明显的前后不一致。据说在之前的版本里面这里的规定更加不明确,不想考古了,知道现在标准是怎么规定的就行了。

3、事件触发时,对应事件对象支持的属性(TODO)

需要较多的测试工作,小本子测试不方便,未免误导大家,先留个TODO了
可以看下百度的兄弟的总结,相当不错,推荐下(ps:里面的结论未实际测试过):
http://www.baiduux.com/blog/2010/06/21/web-storage%E5%85%A8%E8%A7%A3%E6%9E%90/

写在后面

  • 本文相关的话题,比如cookie在不同浏览器的容量限制、可能存在的问题,web storage的安全相关的内容等,暂不展开,因为内容也不少
  • 文章内容如有错漏,烦请指出 :)

参考

《HTML5高级程序设计》

本文链接

相关 [html5 web storage] 推荐:

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式. cookie:兼容性最好,但也有不少问题,下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍.   HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式.     localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;.

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候,我就开始尝试使用HTML5的新元素,具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客,刚开始,查看了大量老外博客,也归纳总结了一下使用场景,在什么情况下使用HTML5的新元素代替原有的没有语义性div,还有如何组织文档内容结构也是比较头疼的事情.

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等). client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client .

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯,第55卷,第7刊,16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程,工作方式和使用途径而言,都是一次非凡的革新. 新的标准简化了程序运行方式,协调了各种终端设备和应用程序之间互访的入口,给用户带了让人惊喜的全新功能.

HTML5 Web Speech API,让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API. 传统的网站只能“说”,这个API的出现,让网站能“倾听”用户. 这个功能已经开放了一系列的用法,非常棒. 在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子. 声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日).

查看 MySQL 支援哪些 Storage Engine

- - Tsung's Blog
MySQL 支援的 Storage Engine 很多, 如下述:. 查看 MySQL 支援哪些 Storage Engine. MySQL 系統能夠使用的 Storage Engine 有哪些呢?. 可以使用 SHOW ENGINES 來查看, 有出現 "Support: Yes" 的, 就是可以使用的..

Web程序员们,你准备好迎接HTML5了吗?

- 小伟 - 博客园-首页原创精华区
作者: dangjian 发表于 2010-09-07 01:44 原文链接 阅读: 4674 评论: 37. HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverlight等插件,也简化了原来需要大量JS才能达到的效果.