IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。虽然这个不是很常用，但是作为学习也是可以了解一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>测试indexedDB</title> 6 <script type="text/javascript" src="js/jquery.min.js" ></script> 7 <script type="text/javascript"> 8 //调整浏览器兼容性 9 if(!window.indexedDB){ 10 window.indexedDB = window.mozIndexedDB || webkitIndexedDB; 11 } 12 //打开或创建数据库这里可以再设置一个属性，版本号，默认为1 13 var request = indexedDB.open('testDB1'); 14 var db; 15 //初始化数据库 16 request.onupgradeneeded=function(event){ 17 db = event.target.result; 18 //创建数据库，第一个值是名字，相当于sql中的表名，第二个属性是设置主键 19 var store = db.createObjectStore("MyDB1",{keyPath:"title"}); 20 console.log("创建数据库成功"); 21 }; 22 //如果已存在，直接使用 23 request.onsuccess=function(e){ 24 db = e.target.result; 25 } 26 $(function(){ 27 //添加数据 28 $("#add").click(function(){ 29 //定义要添加的数据 30 //title是主键，不可重复（title要和创建数据库是设置的一样），这里相当于给数据库添加字段 31 var obj = {"title":$("#test").val(), 32 "name":"21", 33 "ema":"qqqq"}; 34 //readwrite是读写模式 35 db.transaction(["MyDB1"],"readwrite").objectStore("MyDB1").add(obj).onsuccess = function(e){ 36 console.log("添加成功"); 37 }; 38 }); 39 40 //删除数据 41 $("#del").click(function(){ 42 //.delete("qwertyuiop")函数中设置要删除的key值（主键），如果不存在，不会报错 43 db.transaction(["MyDB1"], "readwrite").objectStore("MyDB1").delete("1").onsuccess=function(e){ 44 console.log("删除成功"); 45 } 46 }); 47 48 //查询数据，查询所有 49 $("#sel").click(function(){ 50 // db.transaction("MyDB1").objectStore("MyDB1").openCursor().onsuccess = function(event) { 51 // var getString = ""; 52 // var cursor = event.target.result; 53 // if (cursor) { 54 // getString += "Name for SSN " + cursor.key + " is " + cursor.value.name; 55 // console.log("Name for SSN " + cursor.key + " is " + cursor.value.name); 56 // console.log(cursor.key); 57 // cursor.continue(); 58 // console.log(cursor); 59 // } 60 // } 61 62 63 db.transaction("MyDB1").objectStore("MyDB1").openCursor().onsuccess=function(e){ 64 var cursor = e.target.result; 65 if(cursor){ 66 console.log("KEY: "+cursor.key); 67 console.log("value: "+cursor.value.name+","+cursor.value.ema); 68 //不写cursor.continue();就只查询最后一条 69 cursor.continue(); 70 } 71 } 72 73 }); 74 75 //修改数据 76 //修改数据以title为条件，如果title指定的值存在，则是修改，如果不存在，则是添加一条数据 77 $("#upda").click(function(){ 78 var obj = {"title":"456","name":"test1funck又"}; 79 console.log(obj); 80 db.transaction(["MyDB1"],"readwrite").objectStore("MyDB1").put(obj).onsuccess=function(e){ 81 console.log("修改成功"); 82 } 83 }); 84 85 //按key查询 86 $("#indexse").click(function(){ 87 //.get(key)，student 是value 88 var request=db.transaction(["MyDB1"],'readwrite').objectStore(["MyDB1"]).get("funck"); 89 request.onsuccess=function(e){ 90 var student=e.target.result; 91 console.log(student.name); 92 }; 93 }); 94 95 //删除数据库.deleteDatabase("数据库名"); 96 $("#deleteDB").click(function(){ 97 window.indexedDB.deleteDatabase("testDB1"); 98 }); 99 100 }); 101 </script> 102 </head> 103 <body> 104 dsadjsakhdksa 105 <div> 106 <input type="button" id="add" value="add" /> 107 <input type="button" id="sel" value="select" /> 108 <input type="button" id="del" value="delete" /> 109 <input type="button" id="upda" value="update" /> 110 <input type="button" id="indexse" value="action" /> 111 <input type="button" id="deleteDB" value="deleteDB" /> 112 <input type="text" id="test" /> 113 </div> 114 </body> 115 </html>
