IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。虽然这个不是很常用，但是作为学习也是可以了解一下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试indexedDB</title> <script type="text/javascript" src="js/jquery.min.js" ></script> <script type="text/javascript"> //调整浏览器兼容性 if(!window.indexedDB){ window.indexedDB = window.mozIndexedDB || webkitIndexedDB; } //打开或创建数据库这里可以再设置一个属性，版本号，默认为1 var request = indexedDB.open('testDB1'); var db; //初始化数据库 request.onupgradeneeded=function(event){ db = event.target.result; //创建数据库，第一个值是名字，相当于sql中的表名，第二个属性是设置主键 var store = db.createObjectStore("MyDB1",{keyPath:"title"}); console.log("创建数据库成功"); }; //如果已存在，直接使用 request.onsuccess=function(e){ db = e.target.result; } $(function(){ //添加数据 $("#add").click(function(){ //定义要添加的数据 //title是主键，不可重复（title要和创建数据库是设置的一样），这里相当于给数据库添加字段 var obj = {"title":$("#test").val(), "name":"21", "ema":"qqqq"}; //readwrite是读写模式 db.transaction(["MyDB1"],"readwrite").objectStore("MyDB1").add(obj).onsuccess = function(e){ console.log("添加成功"); }; }); //删除数据 $("#del").click(function(){ //.delete("qwertyuiop")函数中设置要删除的key值（主键），如果不存在，不会报错 db.transaction(["MyDB1"], "readwrite").objectStore("MyDB1").delete("1").onsuccess=function(e){ console.log("删除成功"); } }); //查询数据，查询所有 $("#sel").click(function(){ // db.transaction("MyDB1").objectStore("MyDB1").openCursor().onsuccess = function(event) { // var getString = ""; // var cursor = event.target.result; // if (cursor) { // getString += "Name for SSN " + cursor.key + " is " + cursor.value.name; // console.log("Name for SSN " + cursor.key + " is " + cursor.value.name); // console.log(cursor.key); // cursor.continue(); // console.log(cursor); // } // } db.transaction("MyDB1").objectStore("MyDB1").openCursor().onsuccess=function(e){ var cursor = e.target.result; if(cursor){ console.log("KEY: "+cursor.key); console.log("value: "+cursor.value.name+","+cursor.value.ema); //不写cursor.continue();就只查询最后一条 cursor.continue(); } } }); //修改数据 //修改数据以title为条件，如果title指定的值存在，则是修改，如果不存在，则是添加一条数据 $("#upda").click(function(){ var obj = {"title":"456","name":"test1funck又"}; console.log(obj); db.transaction(["MyDB1"],"readwrite").objectStore("MyDB1").put(obj).onsuccess=function(e){ console.log("修改成功"); } }); //按key查询 $("#indexse").click(function(){ //.get(key)，student 是value var request=db.transaction(["MyDB1"],'readwrite').objectStore(["MyDB1"]).get("funck"); request.onsuccess=function(e){ var student=e.target.result; console.log(student.name); }; }); //删除数据库.deleteDatabase("数据库名"); $("#deleteDB").click(function(){ window.indexedDB.deleteDatabase("testDB1"); }); }); </script> </head> <body> dsadjsakhdksa <div> <input type="button" id="add" value="add" /> <input type="button" id="sel" value="select" /> <input type="button" id="del" value="delete" /> <input type="button" id="upda" value="update" /> <input type="button" id="indexse" value="action" /> <input type="button" id="deleteDB" value="deleteDB" /> <input type="text" id="test" /> </div> </body> </html>