html5d的indexDB使用
2015-10-17 11:12
453 查看
html5d的indexDB使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> var myDB={ name:"helloindexDB", version:2, db:null } function openDB(name,version){ var version=version||2; var request=window.indexedDB.open(name,version); request.onerror=function(e){ alert("发送错误"); } request.onsuccess=function(e){ myDB.db= e.target.result; alert("成功"); } request.onupgradeneeded=function(e){ var db= e.target.result; if(!db.objectStoreNames.contains("students")){ var store=db.createObjectStore("students",{keyPath:"id"}); store.createIndex("nameIndex","name",{unique:true}); store.createIndex("ageIndex","age",{unique:false}); } } } var students=[{ id:101, name:"aa", age:10 }, { id:102, name:"bb", age:20 },{ id:103, name:"cc", age:11 },{ id:104, name:"dd", age:11 },{ id:105, name:"ff", age:19 }]; //添加数据 function addData(db,storeName){ var transaction=db.transaction(storeName,"readwrite"); var store=transaction.objectStore(storeName); for(var i=0;i<students.length;i++){ store.add(students[i]); } } openDB(myDB.name,myDB.version); setTimeout(function(){ addData(myDB.db,"students") },1000); //获得数据 // function getDataByIndexName(db,storeName){ // var transaction=db.transaction(storeName); // var store=transaction.objectStore(storeName); // var index=store.index("nameIndex"); // index.get("aa").onsuccess=function(e){ // var student= e.target.result; // console.log(student.id+"--"+student.name+"--"+student.age); // } // } // setTimeout(function(){ // getDataByIndexName(myDB.db,"students") // },1000); //游标的使用 // function fetchStoreByCursor(db,storeName){ // var transaction=db.transaction(storeName); // var store=transaction.objectStore(storeName); // var request=store.openCursor(); // request.onsuccess=function(e){ // var cursor= e.target.result; // if(cursor){ // console.log(cursor.key); // var currentStudent=cursor.value; // console.log(currentStudent.name); // cursor.continue(); // } // } // } // setTimeout(function(){ // fetchStoreByCursor(myDB.db,"students"); // },1000); //index与游标配合 function getData(db,storeName){ var transaction=db.transaction(storeName); var store=transaction.objectStore(storeName); var index=store.index("ageIndex"); var request=index.openCursor(IDBKeyRange.only(11)); request.onsuccess=function(e){ var cursor= e.target.result; if(cursor){ var student=cursor.value; document.writeln(student.id); cursor.continue(); } } } setTimeout(function(){ getData(myDB.db,"students"); },1000); function getDataFanwei(db,storeName){ var transaction=db.transaction(storeName); var store=transaction.objectStore(storeName); var index=store.index("ageIndex"); // IDBKeyRange.only(value)只获得指定数据 // IDBKeyRange.lowerBound(value,isOpen);获得最新value,isOpen是否包含value // IDBKeyRange.upperBound(value,isOpen); // IDBKeyRange.bound(value1,value2,isOpen1,isOpen2) var request=index.openCursor(IDBKeyRange.only(11)); request.onsuccess=function(e){ var cursor= e.target.result; if(cursor){ var student=cursor.value; document.writeln(student.id); cursor.continue(); } } } setTimeout(function(){ getDataFanwei(myDB.db,"students"); },1000); </script> </head> <body> </body> </html>
相关文章推荐
- 基于HTML5 WebGL实现3D飞机叶轮旋转
- Html5下炫酷文字雨滴效果_简单实现
- H5应用接爱贝HTML5浏览器版(购买结果说明)
- H5应用接爱贝HTML5浏览器版(接入说明)
- html5 前端图片处理(预览、压缩、缩放)
- HTML5分析实战Web存储机制(Web Storage)
- 使用HTML5中的Canvas实现2D水池效果
- HTML5+Canvas 正方体旋转
- html5 获取 陀螺仪,重力感应(转发)
- 基于HTML5 WebGL实现3D飞机叶轮旋转
- 基于HTML5 WebGL实现3D飞机叶轮旋转
- 【ASP.NET 插件】zyUpload的HTML5上传插件
- H5实现摇一摇功能
- HTML5格式问题,你遇到了吗?
- HTML5学习笔记之拖放
- HTML5——Canvas画布绘制图像、绘制线型和绘制图片
- IE的浏览器模式和文档模式
- ie6/ie7/ie8不兼容html5的方法
- HTML5 使用伸缩盒子注意事项
- H5 新特征