浏览器indexedDB的使用方法

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>

 

上一篇:关于使用外界存储判断进入页面的方式


下一篇:浏览器数据库IndexedDB介绍