web本地存储-IndexedDB
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相关推荐
- HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...
- Web本地存储和小程序本地存储的区别
web本地存储 localStorage.setItem("key","value") localStorage.getItem("key" ...
- HTML5中web本地存储
1.1.1 什么是html5web本地存储(web存储)? html5web本地存储可以在本地存储用户的浏览数据.web本地存储相对cookie更加安全和快速,它的数据不会保存在服务器上.它也可以存储 ...
- HTML5本地存储IndexedDB基础使用
做项目时需要用H5本地存储,感觉还不错 下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序 ...
- Html5 web本地存储
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- 购物车数据结构及本地存储技术
未登录购物车 准备 购物车的数据结构 首先分析一下未登录购物车的数据结构. 我们看下页面展示需要什么数据: 因此每一个购物车信息,都是一个对象,包含: {skuId:2131241,title:&qu ...
- HTML5基础扩展——地理位置、本地存储、缓存
HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...
最新文章
- cpu多核 node 单线程_详解node单线程实现高并发原理与node异步I/O
- 英特尔加注RISC-V:砸10亿投资,还加入其国际基金会
- SpringDataJpa备忘录
- Windows下Python包和模块的安装方法(亲测手动安装)
- Angular2 组件与模板 -- 输入和输出属性
- Android实现仿美图秀秀给图片加框
- 梯度下降原理汇总(转载+整理)
- mfc 算方差函数_什么影响了你的工资?方差分析告诉你
- .NET 平台采用率的提升归功于开源
- 外卖餐饮点餐系统,连锁餐饮,公众号小程序源码2.1.5
- 图像阈值中的函数简述
- camera(24)---camera 客观测试 Imatest教程--噪声测试
- Questions make me doubt my engineer career
- VB.NET中DataGridView控件
- Pandas系列(八)字符串处理
- Spring学习(三)Spring 整合MyBatis、声明式事务
- Cache满载的LRU置换
- 浏览器加载、渲染过程总结
- 围棋AI kataGo下载
- BZOJ 3991 set维护dfs序
热门文章
- 后台工具screen
- LoadRunner监控mysql利器-SiteScope(转)
- [转载] 英语科技论文写作——Difference between APAMLA
- C语言open和creat函数
- 扩展sp_MSforeach
- Algs4-1.2.12为SmartDate添加一个方法dayOfTheWeek()
- 史上最快! 10小时大数据入门实战(五)-分布式计算框架MapReduce
- 博世发布7款传感器新品 从汽车到消费电子
- Android自定义View:MeasureSpec的真正意义与View大小控制
- 深入理解JavaScript类数组