编辑推荐:这篇文章来自于黑客志,对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习HTML5的开发者来说,不容错过哦。
历史
在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:
- HTTP cookie 。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。
- IE userData 。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML 的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。
- Flash cookie 。Flash cookie的名字有些误导,它实际上和HTTP cookie并不是一回事,或许它的名字应该叫做"Flash本地存储”,Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。
- Google Gears 。Gears是Google在07年发布的一个开源浏览器插件,旨在改进各大浏览器的兼容 性,Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。
现状
我们现在通常所说的HTML5本地存储,一般指的是
Web
Storage规范
,这个标准曾经是HTML5规范的一部分,但后来因为种种原因从HTML5规范中分离了出来。但是除了Web Storage,HTML5的本地存储标准还有另外2个竞争者:Web SQL Database和IndexedDB。下面就让我们依次来看看这3个规范吧。
Web Storage
Web
Storage是目前得到支持最广泛的HTML5本地存储规范:IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera
10.5+,以及iPhone 2+和Android 2+都已经支持Web Storage,要判断你的浏览器是否支持Web
Storage,可以使用下面这个函数:
- function supports_html5_storage() {
- try {
- return 'localStorage' in window && window['localStorage' ] !== null;
- } catch (e) {
- return false;
- }
- }
HTML5 Storage的使用非常简单:
- var foo = localStorage.getItem("bar" );
- // ...
- localStorage.setItem("bar" , foo);
你也可以写成下面这样:
- var foo = localStorage["bar" ];
- // ...
- localStorage["bar" ] = foo;
如果要将某个key从存储空间删除,可以调用removeItem:
- localStorage.removeItem('foo' );
你也可以像遍历数组那样遍历存储的所有键值对象:
- for(var i=0 ; ivar key = localStorage.key(i);
- console.log(key + ":" + localStorage[key]);
- }
如果你的程序需要在不同页面访问同一个值,你可能需要了解这个值是否已经被其他页面改变了,这可以通过向浏览器注册storage事件来实现:
- window.addEventListener('storage' , function(e) {
- console.log(e.key + "'s value is changed from '" +
- e.oldValue + "' to '" + e.newValue + "' by " + e.url);
- }, false);
- //A页面
- localStorage['foo' ] = 'bar' ;
- //B页面
- localStorage['foo' ] = 'newBar' ;
这时你应该会在A页面的Console中看到:
foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html
要注意的是,storage事件仅仅只是通知你某个键对应的值已经发生了改变,你没有办法在回调中阻止这个改变发生。
HTML5
Storage看起来不错,那它有没什么缺点呢?好问题。要说HTML5
Storage的缺点,唯一的问题就是它默认的QUOTA只有5MB,并且你没办法通过程序自行或是提示用户来增加存储空间。唯一的办法就是用户自己打开
浏览器的设置,并手动修改QUOTA的大小,如果超出了5MB的限制,你将会遇到一个“QUOTA_EXCEEDED_ERR”的错误。
Web SQL Database
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性,所以还是值得了解一下的。
Web SQL Database就像它的名字那样,就是一个让你可以在Web上直接使用的SQL数据库,你要做的就是打开数据库,然后执行SQL,和你对Mysql做的事情没什么两样:
- openDatabase('documents' , '1.0' , 'Local document storage' , 5 *1024 *1024 ,
- function (db) {
- db.changeVersion('' , '1.0' , function (t) {
- t.executeSql('CREATE TABLE docids (id, name)' );
- }, error);
- });
关于Web SQL Database的更多介绍,可以
参看这篇指南
。
但
是它的缺点也同样明显。最大的问题就出在SQL上,实际上并不存在一种叫做SQL的标准结构化查询语言,我们平常使用的实际上是MS
SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite
SQL(尽管有一个叫做SQL-92的规范,但它基本形同虚设),更进一步,甚至都不存在SQLite
SQL,我们使用的实际上是SQLite x.y.z SQL,而这也就是Web SQL
Database最大的问题,它无法统一各个浏览器厂商实现的SQL语言,如果你的某条Web
SQL查询只能在Chrome上运行,这还能叫做标准吗?
所以,如果你现在访问
Web
SQL Database的规范页面
,你会在顶部看到这样一则声明:
这个规范已经陷入了一个僵局:目前的所有实现都是基于同一个SQL后端(SQLite),但是我们需要更多的独立实现来完成标准化,所以除非有厂商愿意独立实现这个规范,否则当前的SQL规范只能采用SQLite的SQL方言,而作为一个标准,这是不可接受的。
IndexedDB
最后我们要介绍的就是
IndexedDB
了,相比其他两个规范,目前只有Firefox实现了IndexedDB(顺便提一下,
Mozilla表示它们永远不会去实现Web
SQL Database
),不过Google已经表示
正在考虑在Chrome中加入IndexDB支持
。
IndexedDB
引入了一个object store的概念,这有点像是一个SQL
Database,你可以在“数据库”中存储“记录”,并且每条“记录”可以拥有很多“字段",每个字段都有一个特定的数据类型,你可以选择记录的子集,
并使用“光标”进行遍历,同时object store中的所有变更都是基于“事务”的。
下面让我们来看一个小例子:
- var request = window.indexedDB.open("CandyDB" ,
- "My candy store database" );
- request.onsuccess = function(event) {
- var db = event.result;
- if (db.version != "1" ) {
- // User's first visit, initialize database.
- var createdObjectStoreCount = 0 ;
- var objectStores = [
- { name: "kids" , keyPath: "id" , autoIncrement: true },
- { name: "candy" , keyPath: "id" , autoIncrement: true },
- { name: "candySales" , keyPath: "" , autoIncrement: true }
- ];
- function objectStoreCreated(event) {
- if (++createdObjectStoreCount == objectStores.length) {
- db.setVersion("1" ).onsuccess = function(event) {
- loadData(db);
- };
- }
- }
- for (var index = 0 ; index < objectStores.length; index++) {
- var params = objectStores[index];
- request = db.createObjectStore(params.name, params.keyPath,
- params.autoIncrement);
- request.onsuccess = objectStoreCreated;
- }
- }
- else {
- // User has been here before, no initialization required.
- loadData(db);
- }
- };
关于Indexed的更多介绍可以参看Mozilla Blog的这篇指南。
发表评论
-
基于脚本的动画的计时控制(“requestAnimationFrame”)(转载)
2014-03-04 19:12 1054Internet Explorer 10 和使 ... -
IE11开发人员工具:UI响应工具详解
2014-02-27 18:33 950我讨厌debug,相信也没多少开发者会喜欢。但是当代码出 ... -
IE11开发人员工具:内存分析工具详解
2014-02-27 18:32 1466上篇我们跟大家介绍 ... -
E6与location.hash和Ajax历史记录 (转载)
2014-02-26 12:23 563为了在IE6中改变hash来保留历史记录实现ajax的前进 ... -
MIME Types(转载)
2013-12-31 10:20 652MIME Types - Complete List ... -
iframe历史记录问题(转载)
2013-10-17 10:21 1353在做页面统计的时候 ... -
前端类库精选(转)
2013-05-11 00:57 0优秀的前端类库,自己平时遇见了,这里Mark一下。 1、m ... -
10个chrome console实用小技巧(转)
2013-05-09 10:56 10751. 基本输出 让我们先从最常见的console.l ... -
CSS3那些不为人知的高级属性(转)
2013-04-19 13:35 963原文:CSS的未来:一些 ... -
JavaScript 时间、格式、转换及Date对象总结(转)
2013-04-10 14:49 726悲剧的遇到问题,从前台得到时间,“Tue Jan 29 16 ... -
如何制作一个可及性强(accessible)的网页弹框(转载)
2013-04-02 16:18 813英文原文:Making an accessib ... -
JavaScript MVC js也mvc(转载)
2013-03-16 23:59 694JavaScript MVC 中文:http://blog ... -
SUBLIME TEXT 2 设置文件详解
2012-12-27 11:21 1066Sublime Text 2是那种让人会一眼就爱上的编辑 ... -
两个按位非操作与Math.floor操作(译)
2012-12-10 18:17 961位操作符在我们编码过程中是容易被遗忘的,可能更多的源于我们 ... -
img中src为空的影响
2012-11-26 23:32 0这是我们经常能遇到的代码,可以直接用html标签或者Java ... -
IE6下position定位子元素溢出,父元素被撑开的解决思路。(转)
2012-11-13 18:04 1652在一些被常规的页面布局当中,我们常常需要通过positi ... -
chrome developer tool 调试技巧(转)
2012-11-12 13:16 873这篇文章是根据目前 chrome 稳定版(19.0.10 ... -
你清楚jquery是如何清除ajax缓存的吗?(转)
2012-11-11 11:19 1061大家都知道万恶的IE在ajax中往往只读取第一次ajax ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率 In JavaScript(转)
2012-11-10 23:33 729随着WebApp突飞猛进的发展,Javascript写的 ... -
Javascript基础
2012-11-10 23:25 0原文:http://bonsaiden.githu ...
相关推荐
4. 存储机制:引入了localStorage和sessionStorage,使得网页可以本地存储数据,实现离线应用。 5. 语义化:通过新的元素和属性,增强了文档的语义,使搜索引擎优化(SEO)和辅助技术更加友好。 CSS3是层叠样式表...
3DS破解不完全指南借鉴 本文档旨在为3DS玩家提供一个破解不完全指南,涵盖基础知识、真实系统与虚拟系统、备份与还原、分离与初始化等多个方面的知识点。下面是本文档的详细知识点解读: 一、基础知识 Q0:常见...
HTML5提供了Web Storage(包括localStorage和sessionStorage)和IndexedDB两种本地数据存储机制。前者用于简单键值对存储,数据持久化,适合小量数据的管理;后者是NoSQL数据库,适用于大量复杂数据的存储和查询。 ...
HTML5游戏开发指南是针对利用HTML5技术进行前端游戏开发的详尽教程,它涵盖了从基础知识到高级应用的全面内容。HTML5作为现代网页开发的标准,其在游戏领域的应用日益广泛,尤其对于移动设备的游戏开发,它提供了...
在Android上实现本地通讯录访问,需要使用HTML5的Web SQL Database或IndexedDB来存储通讯录数据,同时利用PhoneGap或Cordova这样的框架将JavaScript API与Android原生API桥接。PhoneGap提供了一个名为`contacts`的...
《C++17完全指南》是一本深入解析C++17新特性的书籍,由Nicolai M. Josuttis撰写。C++17是C++编程语言的一个重要版本,虽然相较于C++11的革新可能显得较为温和,但它引入了许多小而实用的改进,这些改进对提升开发...
这份“HTML5快速索引指南”是针对那些希望迅速掌握这一技术的专业人士或初学者设计的,它以简洁、实用的方式整理了HTML5的关键知识点。 一、HTML5的基本结构 HTML5的文档类型声明简化为`<!DOCTYPE html>`,这标志着...
- **离线存储**:HTML5提供了本地存储功能,包括localStorage和sessionStorage,使得网页可以在没有网络连接的情况下正常运行。 - **媒体元素**:HTML5增强了对视频和音频的支持,通过`<video>`和`<audio>`标签可以...
HTML5新手入门指南旨在为初学者提供一个清晰的学习路径,了解HTML5的主要技术组成部分。HTML5不仅限于HTML的更新,它还包括CSS3和JavaScript的创新,这些共同构成了现代网页开发的基础。 HTML5的核心技术包括: 1. ...
此外,HTML5引入了离线存储(Off-line Storage)功能,通过`<application cache>`允许网页在离线状态下仍能正常运行。新的媒体元素如`<audio>`和`<video>`,使得网页可以直接内嵌音频和视频,无需依赖Flash等外部...
HTML5的LocalStorage和UserData是两种不同的机制,它们都允许网页在用户本地存储数据,从而实现离线应用或者增强用户体验。这两个技术在实现浏览器兼容性方面起着关键作用,特别是对于那些需要在用户关闭浏览器后...
华为OceanStor存储快速维护指南,OceanStor5000, 5000F, 6000, 6000F V5 系列 V500R007 快速维护指南
在IT行业中,本地存储是Web应用中不可或缺的一部分,特别是在JavaScript环境下。传统的Cookie技术由于其大小限制和性能问题,已经无法满足现代Web应用的需求。本文将深入探讨“本地存储javascript类库”的概念,以及...
在本文中,我们将深入探讨如何使用Java实现在本地读取图片并将其存储到数据库中,之后再通过HTML页面显示这些图片。这个过程涉及到的主要技术包括Java编程、数据库操作(特别是MySQL)以及前后端交互。 首先,我们...
### Boost程序库完全开发指南——深入C++“准”标准库 #### 一、Boost库简介 Boost库是一组高质量的、经过同行评审的、可移植的C++源代码库集合,它为C++程序员提供了丰富的功能。这些库涵盖了算法、容器、泛型...
- **兼容性检查**:考虑到旧版本浏览器可能不支持HTML5本地存储,项目可能会包含兼容性检测和替代方案。 使用这个"vessel"库,前端开发者可以更轻松地在本地存储用户数据,比如用户的偏好设置、游戏进度或者应用...
不过,需要注意的是,虽然大部分现代浏览器都支持HTML5的本地存储,但在实现跨平台兼容时,仍然需要考虑那些不支持此功能的旧版浏览器。同时,对数据安全性和隐私的保护也是开发者在使用本地存储时需要考虑的重要...