HTML5的IndexedDB增删改查
2016-07-11 16:58
471 查看
IndexedDBtest.htm内容如下:
结果如下:
添加:
查询：
更新:
<!DOCTYPE html>
<html >
<head>
<title></title>
<script src="js/indexDb.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
var dbParams = new Object();
dbParams.db_name = "SISO";
dbParams.db_version = "2";
dbParams.db_store_name = "Test";
dbObject.init(dbParams);
}
function Tinsert() {
// 填入初始值
dbObject.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 }, 1);
dbObject.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 }, 2);
dbObject.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 }, 3);
}
function Tselect() {
dbObject.select(3);
}
function Tupdate() {
dbObject.put({ title: "Quarry wu", author: "lex", isbn: 123456 }, 1);
}
function Tdelete() {
dbObject.delete(3);
}
function Tclear() {
dbObject.clear();
}
</script>
</head>
<body onload=" init() ">
<input type="button" value="新增几条数据" onclick=" Tinsert(); "/>
<input type="button" value="查找一条记录" onclick=" Tselect(); "/>
<input type="button" value="删除一条记录" onclick=" Tdelete(); "/>
<input type="button" value="更新一条记录" onclick=" Tupdate(); "/>
<input type="button" value="清除所有表数据" onclick=" Tclear(); "/>
</body>
</html>indexDb.js内容如下:(function(){
var dbObject = {};
dbObject.init = function(params){
this.db_name = params.db_name;
this.db_version = params.db_version;
this.db_store_name = params.db_store_name;
if (!window.indexedDB)
{
window.alert("你的浏览器不支持IndexDB,请更换浏览器");
}
var request = indexedDB.open(this.db_name,this.db_version);
//打开数据失败
request.onerror = function(event)
{
alert("不能打开数据库,错误代码: " + event.target.errorCode);
};
request.onupgradeneeded = function(event)
{
this.db = event.target.result;
this.db.createObjectStore(dbObject.db_store_name);
};
//打开数据库
request.onsuccess = function(event)
{
//此处采用异步通知. 在使用curd的时候请通过事件触发
dbObject.db = event.target.result;
};
};
/**
* 增加和编辑操作
*/
dbObject.put = function(params,key)
{
//此处须显式声明事物
var transaction = dbObject.db.transaction(dbObject.db_store_name, "readwrite");
var store = transaction.objectStore(dbObject.db_store_name);
var request = store.put(params,key);
request.onsuccess = function(){
alert('添加成功');
};
request.onerror = function(event){
console.log(event);
}
};
/**
* 删除数据
*/
dbObject.delete = function(id)
{
// dbObject.db.transaction.objectStore is not a function
request = dbObject.db.transaction(dbObject.db_store_name, "readwrite").objectStore(dbObject.db_store_name).delete(id);
request.onsuccess = function(){
alert('删除成功');
}
};
/**
* 查询操作
*/
dbObject.select = function(key)
{
//第二个参数可以省略
var transaction = dbObject.db.transaction(dbObject.db_store_name,"readwrite");
var store = transaction.objectStore(dbObject.db_store_name);
if(key)
var request = store.get(key);
else
var request = store.getAll();
request.onsuccess = function () {
console.log(request.result);
}
};
/**
* 清除整个对象存储(表)
*/
dbObject.clear = function()
{
var request = dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).clear();
request.onsuccess = function(){
alert('清除成功');
}
};
window.dbObject = dbObject;
})();结果如下:
添加:
查询：
更新:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 