首页 > 代码库 > 谈谈html5存储之IndexdDB
谈谈html5存储之IndexdDB
IndexdDB简介
html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库；且具有丰富的查询能力。
新建一个IndexdDB数据库
IDBOpenDBRequest定义有几个重要的属性：
- onerror：新建或打开数据库失败的回调
- onsuccess：新建或打开数据库成功的回调
- onupgradeneeded：新建或打开数据库版本发生变化时触发的回调
以上的几个API均是异步执行，所以我们在它们的回调函数中处理我们需要的数据。
1 function createIndexDB(dbName,version) {//根据数据库名称和数据库版本号来打开或者新建一个数据库 2 var version = version || 1; 3 var request = window.indexedDB.open(dbName,version); 4 request.onerror = function(e) { //新建或打开数据失败的回调函数 5 console.log(e); 6 }; 7 8 request.onsuccess = function(e) { //新建或打开数据库成功的回调 9 mydb.db = e.target.result; // 把result赋值给对象属性10 };11 12 //初始化object store 也可以//删除object store13 request.onupgradeneeded = function(e){14 var db = e.target.result;15 if(!db.objectStoreNames.contains(‘Employees‘)) { //是否包含员工这个对象16 //db.createObjectStore(‘Employees‘,{keyPath:‘id‘}); // keyPath 指定对象的哪个属性作为主键17 //db.createObjectStore(‘Employees‘,{autoIncrement:true}); //keyGenerate 主键自增长 ，任意值，18 var store = db.createObjectStore(‘Employees‘,{keyPath:‘id‘}); // 同时返回一个store19 store.createIndex(‘nameIndex‘,‘name‘,{unique:true}); //创建name的索引20 store.createIndex(‘ageIndex‘,‘age‘,{unique:true});//创建age的索引21 }22 /*//删除object store23 if(db.objectStoreNames.contains(‘Employees‘)) { //先查询是否存在24 db.deleteObjectStore(‘Employees‘);25 }*/26 27 console.log("db version change to" + version);28 };29 30 }
新建数据库成功：
初始化一些数据：
1 var mydb = { 2 name:‘firstDB‘, 3 version:1, //只能是整数，3.31--->会转成3 4 db:null 5 }; 6 // employee数据 7 var Employee= [{ 8 id:‘lx001‘, 9 name:‘lucas‘,10 age:2011 },12 {13 id:‘lx002‘,14 name:‘lucy‘,15 age:1816 },17 {18 id:‘lx003‘,19 name:‘mike‘,20 age:2221 },22 {23 id:‘lx004‘,24 name:‘susan‘,25 age:2126 }27 ];
添加数据Create：
1 //添加数据2 function addData(db,storename){3 var transaction = db.transaction(storename,"readwrite");//首先获取事务4 var store = transaction.objectStore(storename);//根据事务获取对应的storename获取我们新建数据库的store5 for(var i = 0; i < employee.length; i++) {//遍历我们的数据6 store.add(employee[i]);//add到store中7 }8 }
调用addData函数添加数据：addData(mydb.db, ‘Employee‘)
成功添加数据；
indexdDB中事务
数据库都会有事务操作，indexdDB中根据数据库名字即read/write来获取事务，如添加数据库第一句代码。事务中要指定需要的object store；同时事务中具有3中模式：
- read：只读，不可修改数据库可以并发执行；
- readwrite：读写，可以修改数据库；
- verionchange：数据库版本变更
indexdDB中的主键，索引，游标
主键：在新建数据库的时候指定数据的某个字段作为主键且该字段具有唯一性；如本文中就指定了id作为了主键（keyPath）。同时也可以使用自动增长数字作为键值(keyGenerator)；同时也可以不指定。
索引：索引页是数据库中高效查询的一种方法；同时indexdDB也提供了创建索引的功能；如上新建数据库的时候我们就顺便创建了两个索引（nameIndex/ageIndex）。创建索引需要3个参数：索引名称，创建索引的字段，索引属性是否唯一；
游标：有了索引没有游标索引岂不是很寂寞，indexdDB同时也提供了创建游标的方法；我们可以使用游标来遍历object store了；
下面是创建游标：
1 //使用游标来获取值，结合索引 2 function getDataByFetch(db, storename,indexType, indexName) { 3 var transaction = db.transaction(storename); 4 var store = transaction.objectStore(storename); 5 var index = store.index(indexType); // 6 var request = index.openCursor(IDBKeyRange.only(indexName)); //打开游标，得到一个请求；store打开的是哪个类型的索引，only中就是哪个索引的值 7 request.onsuccess = function(e) { 8 var cursor = e.target.result; 9 if(cursor) {10 console.log(cursor.key)11 var e = cursor.value;12 console.log(e);13 cursor.continue(); //游标下一位，没有会返回undefined14 }15 }16 }
游标创建完成；
平常数据库中常常使用的CRUD，indexdDB也提供了相应的方法；上面已经介绍了添加数据
查询数据 Retrieve：
1 //根据id获取数据 2 function getDataByKey(db,storename,id){ 3 var transaction = db.transaction(storename,‘readwrite‘);//先获取事务 4 var store = transaction.objectStore(storename);//获取object store 5 var req = store.get(id); // 根据指定的keyPath的值查询 即id值 6 req.onsuccess = function(e) { 7 var employee = e.target.result; 8 console.log(employee.name); 9 }10 }11 //利用索引来获取值12 function getDataByIndex(db,storename,indexType, indexName) {13 var transaction = db.transaction(storename);//根据storename获取事务14 var store = transaction.objectStore(storename); //storename为参数用事务获取store15 var index = store.index(indexType);//使用index方法获取IDBIndex对象16 index.get(indexName).onsuccess = function(e) {17 var e = e.target.result;18 console.log(e);19 }20 }21 22 //同时也可以使用游标来获取值，结合索引23 function getDataByFetch(db, storename,indexType, indexName) {24 var transaction = db.transaction(storename);25 var store = transaction.objectStore(storename);26 var index = store.index(indexType); //27 var request = index.openCursor(IDBKeyRange.only(indexName)); //打开游标，得到一个请求；store打开的是哪个类型的索引，only中就是哪个索引的值28 request.onsuccess = function(e) {29 var cursor = e.target.result;30 if(cursor) {31 console.log(cursor.key)32 var e = cursor.value;33 console.log(e);34 cursor.continue(); //游标下一位，没有会返回undefined35 }36 }37 }
查询结果：
更新数据 update：
// 更新数据function updateData(db, storename, id){ var transaction = db.transaction(storename, ‘readwrite‘); //获取事务 var store = transaction.objectStore(storename);// 得到指定的object store var req = store.get(id);//根据id查找指定的对象 req.onsuccess = function(e) { var employee = e.target.result;//得到对象 employee.age = 19;//修改值 store.put(employee);//将修改之后的值放回指定的object store中 };}
删除数据 delete：
1 // 根据id删除指定数据2 function deleteData(db, storename, id){3 var transaction = db.transaction(storename, ‘readwrite‘);//获取事务4 var store = transaction.objectStore(storename); // 得到对应的object store5 store.delete(id);// 根据id删除对应store中的数据6 }
清空object store
1 //清空object store2 function clearStore(db, storename) {3 var transaction = db.transaction(storename,‘readwrite‘); // 首先获取事务4 var store = transaction.objectStore(storename); //其次得到指定的object store5 store.clear(); // store调用clear方法6 }
怎么样， 是不是觉得indexdDB很强大呢？以上都是自己的一些个人学习收获，如有不对的地方欢迎大家批评指正。谢谢！
谈谈html5存储之IndexdDB
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。