IndexedDB: 浏览器里内置的数据库简介

一、概述:

所有的应用程序都需要“数据”支持。对于大多数的Web应用程序来说,数据是在服务器端进行组织和整理,然后由客户端(浏览器端)通过网络请求获取。随着浏览器的处理能力不断增强,可以在浏览器端存储和操纵应用程序需要的数据,因此越来越多的网站开始考虑,将大量数据储存在本地客户端,这样可以减少用户等待从服务器端获取数据的时间。

现有的浏览器端数据储存方案,都不适合储存大量数据。Cookie不超过4KB,且每次请求都会发送回服务器端;Window.name属性缺乏安全性,且没有统一的标准;LocalStorage容量在2.5MB到10MB之间,且其以字符串形式进行存储。因此,需要一种新的技术解决方案,这就是IndexedDB诞生的背景。

IndexedDB 是一种浏览器端文档数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,并且提供查询接口,且可以建立索引。这些特性都是localStorage技术所不具备的。就数据库类型而言,IndexedDB不属于关系型数据库(不支持SQL查询语句),更接近NoSQL数据库。关系型数据库(如SQL Server,MySQLOracle等)的数据存储在表中;文档数据库(如MongoDB,CouchDB,Redis)将数据集作为个体对象来存储。 
通过使用IndexedDB,开发者可以通过惯于在服务器端数据库几乎相同的方式进行创建、读取、更新和删除大量数据记录的操作。

IndexedDB具备以下几项特点: 
(1) 键值对储存(Key-Value) 
IndexedDB内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括JavaScript对象。在对象仓库中,数据以“键值对”的形式保存,每一个数据都有对应的键名,且键名必须是独一无二的,不能有重复,否则会抛出错误。

(2) 异步API(asynchronous API ) 
IndexedDB数据库在执行增、删、改和查的操作时不会锁死浏览器,用户依然可以进行其它操作。相比之下,localStorage的操作都是同步的。异步设计是为了防止大量数据的读写时拖慢网页,而影响用户的网站体验。

(3) 支持事务(transaction) 
IndexedDB支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回到事务发生之前的状态,不存在只改写一部分数据的情况。

(4) 同域限制 
IndexedDB也受到同域限制,每一个数据库对应创建该数据库的域名。来自不同域名的网页,只能访问自身域名下的数据库,而不能访问其他域名下的数据库。

(5) 存储空间大 
IndexedDB的存储空间比localStorage大得多,一般来说不少于250MB。IE的储存上限是250MB,Chrome和Opera是硬盘剩余空间的某个百分比,Firefox则没有上限。

(6) 支持二进制储存 
IndexedDB不仅可以储存字符串,还可以储存二进制数据。

二、IndexedDB VS LocalStorage, Web SQL, Cookies

IndexedDB VS LocalStorage

IndexedDB和LocalStorage都是用来在浏览器里存储数据,但它们使用不同的技术,有不同的用途,你需要根据自己的情况适当的选择使用哪种。

LocalStorage是用key-value键值模式存储数据,但跟IndexedDB不一样的是,它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象,你需要借助JSON.stringify()能将对象变成字符串形式,再用JSON.parse()将字符串还原成对象。但如果要存储大量的复杂的数据,这并不是一种很好的方案。毕竟,localstorage就是专门为小数量数据设计的,它的api是同步的。

IndexedDB很适合存储大量数据,它的API是异步调用的。IndexedDB使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多,但它的API也相对复杂。对于简单的数据,你应该继续使用localstorage,但当你希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB能提供给你更为复杂的查询数据的方式。

IndexedDB VS Web SQL

WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看:http://www.w3.org/TR/webdatabase/。因为不再支持,所以你就不要在项目中使用这种技术了。

IndexedDB VS Cookies

Cookies(小甜点)听起来很好吃,但实际上并不是。每次HTTP接受和发送都会传递Cookies数据,它会占用额外的流量。例如,如果你有一个10KB的Cookies数据,发送10次请求,那么,总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限,很多用户禁止浏览器使用Cookies。所以,Cookies只能用来存储小量的非关键的数据。

三、IndexedDB架构及技术实现

IndexedDB的架构很像在一些流行的服务器端NoSQL数据库实现中的设计典范类型。面向对象数据通过object stores(对象仓库)进行持久化,所有操作基于请求同时在事务范围内执行;事件生命周期使你能够控制数据库的配置,错误通过错误冒泡来使用API管理。

IndexedDB之打开数据库的请求生命周期(Life cycle)

浏览器原生提供indexedDB对象,可以通过window.indexedDB来直接获取到浏览器提供的该对象,作为开发者的操作接口。IndexedDB.open方法用于打开浏览器本地数据库。 
IndexedDB使用事件生命周期管理数据库的打开和配置操作。

IndexedDB之基于请求(Request)

对数据库的每次操作,可以描述为通过一个请求打开数据库,访问一个object store,再继续。IndexedDB API天生是基于请求的,这也是异步API本性所示。对于在数据库执行的每次操作,都必须首先为这个操作创建一个请求。当该请求完成,可以响应由请求结果产生的事件或错误。

IndexedDB之对象仓库(Object Store)

Object store是IndexedDB数据库的基础。Object store相当于关系型数据库中的一张张记录数据的表。Object stores中包括一个或多个索引(index),在store中按照一对键-值操作,这提供了一种快速定位数据的方法。

IndexedDB之一切操作基于事务(Transaction)

不同于一些传统的关系数据库的实现,每一个对数据库操作是在一个事务的上下文中执行的。事务范围一次影响一个或多个object stores,你通过传入一个object store名字的数组到创建事务范围的函数来定义。

创建事务的第二个参数是事务模式。当请求一个事务时,必须决定是按照只读(ReadOnly)还是读写(ReadWrite)模式请求访问。事务是资源密集型的,所以如果你不需要更改data store中的数据,你只需要以只读模式对object stores集合进行请求访问。

IndexedDB之错误冒泡

当然,有时候,请求可能不会按预期完成。IndexedDB API通过错误冒泡功能来帮助跟踪和管理错误。如果一个特定的请求遇到错误,你可以尝试在请求对象上处理错误,或者你可以允许错误通过调用栈冒泡向上传递。这个冒泡天性,使得你不需要为每个请求实现特定错误处理操作,而是可以选择只在一个更高级别上添加错误处理,它给你一个机会,保持你的错误处理代码简洁。 
Try……catch机制。

四、w3c中关于IndexedDB基本用法及API

http://www.w3.org/TR/IndexedDB/#dfn-invalidstateerror

五、IndexedDB参考资料

    1. IndexedDB:浏览器里内置的数据库, Web骇客 
      http://www.webhek.com/indexeddb/
    2. 前端的数据库:IndexedDB入门(很全面) 
      http://web.jobbole.com/81793/
    3. IndexedDB:浏览器端数据库, 阮一峰《JavaScript标准参考教程(alpha)》 
      http://javascript.ruanyifeng.com/bom/indexeddb.html
    4. HTML5本地存储——IndexedDB 
      http://www.cnblogs.com/dolphinX/p/3415761.html (一、基本使用) 
      http://www.cnblogs.com/dolphinX/p/3415761.html (二、索引)
    5. HTML5之IndexedDB使用详解 
      http://rainsilence.iteye.com/blog/984569
    6. W3C: Indexed Database API 
      http://www.w3.org/TR/IndexedDB/#dfn-invalidstateerror
    7. Dive into HTML5: 本地存储 
      http://www.devbean.net/2011/06/dive-into-html5-localstorage/
    8. Angular-indexedDB 
      https://github.com/bramski/angular-indexedDB
    9. HTML5 Local Storage本地存储 
      http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
时间: 2024-08-26 11:21:31

IndexedDB: 浏览器里内置的数据库简介的相关文章

IndexedDB:浏览器里内置的数据库(转)

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库.对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式.存储在IndexedDB里的数据是永久保存,不像cookies那样只是临时的.IndexedDB里提供了查询数据的功能,在online和offline模式下都能使用.你可以用IndexedDB存储大型数据. IndexedDB里数据以对象的形式存储,每个对象都有一个k

现代浏览器中内置的可以等效替代jQuery的功能

jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法 去除. 就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提 供的DOM选择器功能.对于一些像IE6/IE7这样的老式浏览器,这种做法是显而易

几个主流浏览器的内置http的抓包工具(转)

对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置了免费的抓包工具,小编今天就向大家简单介绍几款. 工具/原料 几款常见浏览器 方法/步骤 1 谷歌浏览器chrome自带的http抓包工具界面简洁大方,功能也很强大,唯一的不足就是界面是英文的.打开方式:点击右上角的菜单-->工具-->开发者工具. 2 下图是打开之后的界面.可以随便访问一个页面来

Fedora25安装Flash插件和Opera浏览器——此浏览器据说内置VPN

Opera浏览器,是一款适用于各种平台.操作系统和嵌入式网络产品的高品质.多平台产品.采用Opera Turbo功能极大的改善受限连接上的浏览器速度,例如wifi,手机联网等:新引擎 Opera Presto在渲染内容复杂页面时速度更快,提速40%:全新的可视化标签,根据个人需求自定义自己的快速拨号.据说,内置VPN. 需要先配置FZUG源:这是一个专门为Fedora中文用户建立的源,很好用.包含很多常用软件,非常推荐安装. 注意事项 一些软件依赖 RPM Fusion 源,请事先自行添加.Fe

list里内置程序用法

列表是我们编程工作中经常都会遇到的数据类型.一下是列表里面的一些常用操作,主要分为:增! 删! 改! 查! first 查: 1.索引(下标),其中有切片操作,但要注意下标都是从零开始: 2.查元素出现次数: 3.查元素在列表位置: 4.查元素是否在列表: 方法一: 方法二: second增加: 1.append增加在元素后面: 2.insert根据所选地址增加: 3.extend一个字典内容增加到另一个字典: third改正: 1.直接用赋值符号. 2多个元素之间替换: fourth删除: 1

QScrollArea可以帮助我们实现让一个widget的内容带有滚动条(QWidget里内置QScrollArea,QScrollArea里再内置其它QWidget)

使用QScrollArea可以帮助我们实现让一个widget的内容带有滚动条,用户可以通过拖动滚动条来查看更多内容, 代码示例如下: 1.带有滚动条的widget列表 #include "widget.h" Widget::Widget(QWidget *parent) : QWidget(parent) { list=new QListWidget(); lay=new QHBoxLayout(); QSizeGrip *gr=new QSizeGrip(list);//用来重设wi

ASP.NET MVC 常用内置验证特性 简介

0.[DisplayName("名字")] 0.[DisplayName("名字")] 1.[Required] : 必须输入 [Required(ErrorMessage = "请输入用户名")] 2.[StringLength] : 限制字符串长度 [StringLength(10, ErrorMessage = "长度不能超过10个字符")] 3.[Range] : 限制取值范围 1 [Range(0, 120, Err

python开发函数进阶:命名空间,作用域,函数的本质,闭包,内置方法(globales)

一,命名空间 #局部命名空间#全局命名空间#内置命名空间 #三者的顺序#加载顺序 硬盘上--内存里#内置-->全局(从上到下顺序加载进来的)-->局部(调用的时候加载) 1 #!/usr/bin/env python 2 #_*_coding:utf-8_*_ 3 4 #全局命名空间 5 a = 5 6 b = 8 7 #局部命名空间(函数) 8 def my_max(): 9 c = a if a > b else b 10 return c 11 m = my_max() 12 pr

MySQL默认数据库简介

类似于MS SQL Server等大型数据库,MySQL数据库也提供了内置的数据库,它们是: INFORMATION_SCHEMA mysql test 1.information_schema 其中,第一个数据库INFORMATION_SCHEMA提供了访问数据库元数据的方式.元数据是关于数据的数据,如数据库名或表名,列的数据类型,或访问权限等.有些时候用于表述该信息的其他术语包括"数据词典"和"系统目录". INFORMATION_SCHEMA是信息数据库,其中