IndexedDB, HTML5中的一种数据存储方式,索引数据库。

一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称。一个数据库可包含多个对象存储,一个对象存储相当于一张表,是一个记录集合。每个记录都有一个键(key)和值(value)。
(以下所有代码及说明均针对目前最新的API规范)

示例代码1:使用indexedDB数据库

 1 //判断是否存在支持
 2 if(window.indexedDB){
 3     //打开一个数据存储库对象请求。指定参数存储库名和版本号。
 4     request = indexedDB.open("db_test",1);
 5
 6     //添加监听方法: 存储库不存在时触发该方法。
 7     request.onupgradeneeded = function (event){
 8         //存储库初始化的处理.
 9         //创建存储对象表和修改版本需要在此处处理
10         var db = event.target.result;
11     };
12
13     //添加监听方法: 打开储存库成功后触发
14     //若存在版本改变,则在onupgradeneeded之后触发
15     //通过event对象参数可以得到一个Database对象实例的引用db,通过db就可以进行数据的读写操作。
16     request.onsuccess = function (e){
17         //请求成功后处理
18         var db = e.target.result;
19     }
20 }

一个数据库只能有一个版本号,版本号必须为长整型数据(新规范API只支持Long长整型数据),打开更高版本的数据库或者要打开的数据库本地不存在时,会触发onupgradeneeded,修改数据库和存储对象必须在此处处理。若触发onupgradeneeded则其执行完后再触发onsuccess。

示例代码2:创建存储对象及索引

1 var store = db.createObjectStore("tb_test",{keyPath: "name"});//创建名为tb_test的存储对象,主键key指定为name属性。
2 store.createIndex("by_name","name",{unique: true});//创建索引

createObjectStore(String name, optional IDBObjectStoreParameters optionalParameters):
此操作需要versionchange的特殊事务,db必须是具有已开启此事务的Database对象。
创建一个存储对象,第一参数为存储数据的表名。第二个可选{keyPath: key} 或者 {autoIncrement: true}
1、keyPath: 指定指定每条数据存储的主键key,key必须是存储对象中的一个属性
2、autoIncrement:为true则每添加一条数据,主键key值将自增产生。
3、如果没有指定第二个参数获取指定的无效如{keyPath: null}、{autoIncrement: false},此时在存储数据时必须手动指定主键key值得参数。

示例代码3:往存储对象中写入数据

1 var tx, store, index, request;
2 tx = db.transaction("tb_test", "readwrite");//开启一个读写事务
3 store = tx.objectStore("tb_test");//获取需要处理的存储对象
4 request = store.put({name: "test", message: "OK"});//写入数据
5 request.onsuccess = function (e){};//写入成功
6 request.onerror = function (e){};//error

示例代码4:读取存储对象中的数据

 1 var tx, store, index, request;
 2 tx = db.transaction("tb_test", "readonly");//开启一个只读事务
 3 store = tx.objectStore("tb_test");//获取需要处理的存储对象
 4 index = store.index("by_name");//获取一个索引
 5 request = index.get("test");//使用索引获取"test"对象的值
 6 request.onsuccess = function (e){
 7     var matching = e.target.result, v = matching;
 8     console.log(v);// -->{name: "test", message: "OK"}
 9 };
10 request.onerror = function (e){
11     console.log(e.message);
12 };

兼容性:

indexedDB也存在很多兼容性问题,新旧版本规范和不同核心浏览器间均存在部分差异。
1、全局变量indexedDB差异:
webkitIndexedDB(webkit核心) mozIndexedDB(Gecko核心) msIndexedDB(IE核心)
目前主流的大部分最新版本浏览器同时存在indexedDB变量。
另外IDBTransaction和IDBKeyRange类似情况。
为兼容性考虑需在代码前加:

1 window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
2 window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
3 window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;

2、open方法参数目前新的规范与较老的略有不同,主要是第二个参数。具体可查阅W3C网站,个人感觉不太重要, 建议直接指定一个整数值得版本号即可。
3、onupgradeneeded方法:
较老版规范中是没有这个事件方法的,open方法中是没有对应版本号的参数的,因此在这种老版规范的浏览器中,是直接触发onsuccess的,相比来说,就是少了onupgradeneeded一步。这时原本onupgradeneeded中的初始化操作就没有了,因此需要另外添加处理。老版中提供了setVersion方法用于做这样的操作,通过判断打开的version与要打开的version是否相同来判定(触发过onupgradeneeded时,一定是相同的),然后处理。

1 //在onsuccess的函数代码前添加,此部分代码只有部分旧版才会执行
2 if(db.version != dbVersion){
3     var svReq = db.setVersion(dbVersion);
4     svReq.onsuccess = function (e) {
5         //此时处理与onupgradeneeded中相同的初始化操作。
6     };
7 }

4、开启transaction事务时,代表事务类型的参数值不同。
目前新版:只读 readonly, 读写 readwrite,版本改变 versionchange
旧版:IDBTransaction下存在三个常量 READ_ONLY = 0,READ_WRITE = 1,VERSION_CHANGE = 2
如果是这样的旧版,传入"readonly"这样的字符串将抛出异常,而新版若是传入对应的这种数字常量也将抛错。因此需做兼容性判断,可提前做如下定义。

1 var READ_ONLY = (IDBTransaction && IDBTransaction.READ_ONLY == 0) ? 0 : "readonly";
2 var READ_WRITE = (IDBTransaction && IDBTransaction.READ_WRITE) || "readwrite";
3 var VERSION_CHANGE = (IDBTransaction && IDBTransaction.VERSION_CHANGE) || "versionchange";

IndexedDB异步性:
IndexedDB基本上所有的操作都是异步性的操作,因此在应用时很多地方要特别注意。因此在函数执行结束时,IndexedDB操作可能并未完成。
案例:在存储对象初始化代码执行结束后,因为这里的事务也是异步的处理,对象存储环境可能并未完成,或者事务正在执行尚未完成。此时使用db再去做其他读写操作,就会抛出异常(A version change transaction is running.)。如何知道事务已经完成,事务中有一个oncomplete方法,当事务完成时将会触发。对初始化操作可添加修改如下(示例代码2):

1 var store = db.createObjectStore("tb_test",{keyPath: "name"});
2 store.createIndex("by_name","name",{unique: true});
3 store.transaction.oncomplete = function (e){
4     var db = e.target.db;
5     //此时事务已经完成。
6 };

更多信息可查阅http://www.w3.org/TR/IndexedDB/。

(第一次发文,如有错误的地方,还请多多包涵,问题建议都可提出,一定尽快回复和更新^_^)


参考资料:

http://www.w3.org/TR/IndexedDB/  W3C IndexedDB Database API

http://www.ibm.com/developerworks/cn/web/wa-indexeddb/  使用HTML5 indexedDB API

http://database.51cto.com/art/201202/319551.htm  解决兼容性的部分参考

转载于:https://www.cnblogs.com/javawjw/p/IndexedDB.html

web本地存储-IndexedDB相关推荐

  1. HTML5本地存储——IndexedDB

    在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  2. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...

  3. Web本地存储和小程序本地存储的区别

    web本地存储 localStorage.setItem("key","value") localStorage.getItem("key" ...

  4. HTML5中web本地存储

    1.1.1 什么是html5web本地存储(web存储)? html5web本地存储可以在本地存储用户的浏览数据.web本地存储相对cookie更加安全和快速,它的数据不会保存在服务器上.它也可以存储 ...

  5. HTML5本地存储IndexedDB基础使用

    做项目时需要用H5本地存储,感觉还不错 下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序 ...

  6. Html5 web本地存储

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  7. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  8. 购物车数据结构及本地存储技术

    未登录购物车 准备 购物车的数据结构 首先分析一下未登录购物车的数据结构. 我们看下页面展示需要什么数据: 因此每一个购物车信息,都是一个对象,包含: {skuId:2131241,title:&qu ...

  9. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

最新文章

  1. cpu多核 node 单线程_详解node单线程实现高并发原理与node异步I/O
  2. 英特尔加注RISC-V:砸10亿投资,还加入其国际基金会
  3. SpringDataJpa备忘录
  4. Windows下Python包和模块的安装方法(亲测手动安装)
  5. Angular2 组件与模板 -- 输入和输出属性
  6. Android实现仿美图秀秀给图片加框
  7. 梯度下降原理汇总(转载+整理)
  8. mfc 算方差函数_什么影响了你的工资?方差分析告诉你
  9. .NET 平台采用率的提升归功于开源
  10. 外卖餐饮点餐系统,连锁餐饮,公众号小程序源码2.1.5
  11. 图像阈值中的函数简述
  12. camera(24)---camera 客观测试 Imatest教程--噪声测试
  13. Questions make me doubt my engineer career
  14. VB.NET中DataGridView控件
  15. Pandas系列(八)字符串处理
  16. Spring学习(三)Spring 整合MyBatis、声明式事务
  17. Cache满载的LRU置换
  18. 浏览器加载、渲染过程总结
  19. 围棋AI kataGo下载
  20. BZOJ 3991 set维护dfs序

热门文章

  1. 后台工具screen
  2. LoadRunner监控mysql利器-SiteScope(转)
  3. [转载] 英语科技论文写作——Difference between APAMLA
  4. C语言open和creat函数
  5. 扩展sp_MSforeach
  6. Algs4-1.2.12为SmartDate添加一个方法dayOfTheWeek()
  7. 史上最快! 10小时大数据入门实战(五)-分布式计算框架MapReduce
  8. 博世发布7款传感器新品 从汽车到消费电子
  9. Android自定义View:MeasureSpec的真正意义与View大小控制
  10. 深入理解JavaScript类数组