<!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>
![【MySQL資料庫】資料庫索引事務1.索引2.事務[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)