indexDB:html5本地數據庫存儲


html5新增的本地存儲數據庫 IndexDB,相比cookie和WebStorage更加強大,本文介紹簡單的增刪改查。

demo執行前:
這里寫圖片描述


var request = indexedDB.open('dataBase', 1);//打開/創建一個數據庫,名為student,版本為1.
//indexedDB.deleteDatabase('class');//刪除名為class的數據庫
var dbase;

//第一次創建數據庫或者更新數據庫
request.onupgradeneeded = function() {
dbase = this.result;
//創建表
var store = dbase.createObjectStore('student', {
keyPath: 'id'
})
;
store.createIndex('id', 'id', {
unique: true
})

store.createIndex('name', 'name', {
unique: false
})

store.createIndex('score', 'score', {
unique: false
})

};

//成功打開數據庫
request.onsuccess = function() {
dbase = this.result;
var transaction = dbase.transaction(['student'], 'readwrite'); //打開一個事務,使用‘studentobject store,以讀寫模式
var store = transaction.objectStore('student'); //獲取student object Store
var index = store.index('id');//查詢索引

//添加
//添加一條數據:add()時要保證當前表內不存在要添加的id
//當不確定時,建議使用put();put:
存在時修改,不存在時添加
var resadd = store.add({
'id': 5,
'name': 'skymobi',
'score': 75
});
resadd.onsuccess = function(){
console.log("添加成功!");
}
resadd.onerror = function(e){
console.error(e.target.error);
}

//刪除
//刪除id(主鍵)為3的數據(請先添加數據)
store.delete(3);

//修改
store.put({
'id': 4,
'name': 'surfaceStudio',
'score': 95
});

//查詢所有數據
var rq = index.openCursor();
rq.onsuccess = function() {
var cursor = this.result;
if(cursor) {
console.log(cursor.value);
cursor.continue();
}
}

//查詢單個數據
//查詢id為2的數據(請先添加數據)
var range = IDBKeyRange.only(2);
var rqRange = index.openCursor(range);
rqRange.onsuccess = function() {
var cursor = rqRange.result;
if(cursor) {
console.info(cursor.value);
}
}
}

執行后
這里寫圖片描述

更多詳細API請見:https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com