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

一、概述:

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

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

IndexedDB 是一种浏览器端文档数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,并且提供查询接口,且可以建立索引。这些特性都是localStorage技术所不具备的。就数据库类型而言,IndexedDB不属于关系型数据库(不支持SQL查询语句),更接近NoSQL数据库。关系型数据库(如SQL Server,MySQL,Oracle等)的数据存储在表中;文档数据库(如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

转载于:https://my.oschina.net/u/2499632/blog/1554381

你可能感兴趣的:(javascript,json,数据库,ViewUI)