來源:xiaohongIT 發(fā)布時(shí)間:2019-03-28 14:04:33 閱讀量:1245
打開一個(gè)DB 類似打開或創(chuàng)建一個(gè)數(shù)據(jù)庫
var request = indexedDB.open('student', 1);
1
第一個(gè)值為名稱,第二個(gè)值為版本號(hào) 若無相應(yīng)的數(shù)據(jù)庫會(huì)自動(dòng)創(chuàng)建
若版本號(hào)比創(chuàng)建時(shí)的版本高 則會(huì)觸發(fā)更新
添加監(jiān)聽事件 onsuccess 打開成功 onerror 打開失敗 onupgradeneeded 升級(jí)
request.onerror = function (event) {
console.log('數(shù)據(jù)庫打開報(bào)錯(cuò)');
};
request.onsuccess = function(event) {
console.log('數(shù)據(jù)庫打開成功');
var db = event.target.result;
insert(db);//傳值添加數(shù)據(jù)
};
request.onupgradeneeded = function (event) {
console.log('需要升級(jí)');
var db = event.target.result;
createTable(db);//創(chuàng)建倉庫和索引傳值
}
創(chuàng)建數(shù)據(jù)倉庫 (類似數(shù)據(jù)庫中的表) 和索引
function createTable(db) {
if (!db.objectStoreNames.contains('user')) {//判斷表是否存在
var store = db.createObjectStore('user', {
keyPath: 'Id', //設(shè)置主鍵
autoIncrement: true //自增
});
var idx = store.createIndex('user_list', 'Id', {unique: true});
//創(chuàng)建索引 名稱為userlist 主鍵為Id 不允許重復(fù)值
}
console.log('創(chuàng)建倉庫和索引成功');
}
主鍵(key)是默認(rèn)建立索引的屬性。比如,數(shù)據(jù)記錄是{ id: 1, name: ‘張三’ },那么id屬性可以作為主鍵。主鍵也可以指定為下一層對(duì)象的屬性,比如{ foo: { bar: ‘baz’ } }的foo.bar也可以指定為主鍵。
如果數(shù)據(jù)記錄里面沒有合適作為主鍵的屬性,那么可以讓 IndexedDB 自動(dòng)生成主鍵。
indexedDb的數(shù)據(jù)類型
{id:1,name:'xiaohong'}
//也可以是json文件等
{
"Id": 1001,
"username": "張一",
"sex": "男",
"age": "18",
"mobile": "18037382739"
}
對(duì)象倉庫保存的是數(shù)據(jù)記錄。每條記錄類似于關(guān)系型數(shù)據(jù)庫的行,但是只有主鍵和數(shù)據(jù)體兩部分。主鍵用來建立默認(rèn)的索引,必須是不同的,否則會(huì)報(bào)錯(cuò)。主鍵可以是數(shù)據(jù)記錄里面的一個(gè)屬性,也可以指定為一個(gè)遞增的整數(shù)編號(hào)。
向倉庫中添加數(shù)據(jù) add()
function insert(db){
var tran = db.transaction(["user"], 'readwrite');
var store = tran.objectStore('user');
var value = {
"Id": 1001,
"username": "張一",
"sex": "男",
"age": "18",
"mobile": "18037382739"
};
var req = store.add(value);
req.onsuccess = function (event) {
console.log('數(shù)據(jù)寫入成功');
};
req.onerror = function (event) {
console.log('數(shù)據(jù)寫入失敗');
}
}
也可以用Jquery 異步獲取json文件添加
function insert(db) {
$.ajax({
url: "data.json",
dataType: "json",
success: function(datas){
var tran = db.transaction(["user"], 'readwrite');
var store = tran.objectStore('user');
var value = datas;
var req = store.add(value);
req.onsuccess = function (event) {
console.log('數(shù)據(jù)寫入成功');
};
req.onerror = function (event) {
console.log('數(shù)據(jù)寫入失敗');
}
}
});
}
上面代碼中先新建一個(gè)事務(wù),必需指明 表名 和 操作模式 (只讀或讀寫)
可以添加事件監(jiān)控是否成功添加數(shù)據(jù)
讀取數(shù)據(jù) 讀取所有 getAll() 讀取單個(gè) get(主鍵)
//獲取所有數(shù)據(jù) getAll()
function selectAll(db){
var tran = db.transaction(["user"]);
var store = tran.objectStore('user');
store.getAll().onsuccess = function(event){//從主表中按主鍵獲取結(jié)果
//store.index('user_list').getAll().onsuccess = function(event){ //從索引中按主鍵獲取結(jié)果
var result = event.target.result;
for(var i in result){ //遍歷結(jié)果
console.log(result[i]['Id']);
console.log(result[i]['username']);
console.log(result[i]['sex']);
console.log(result[i]['age']);
console.log(result[i]['mobile']);
}
}
}
//按主鍵獲取數(shù)據(jù) get(主鍵)
var tran = db.transaction(["user"]);
var store = tran.objectStore('user');
var test = store.get(1001);//從主表中獲取主鍵為1001的學(xué)生信息
//var test = store.index('user_list').get(1001);//從索引中獲取主鍵為1001的學(xué)生信息
test.onsuccess=function(event){
var student=event.target.result;
console.log(student);
};
上面代碼中 getAll讀取全部數(shù)據(jù),get()讀取單個(gè)數(shù)據(jù),參數(shù)是主鍵值
通過監(jiān)控來確定讀取成功或失敗
更新數(shù)據(jù) put()
function updata(db){
var tran = db.transaction(["user"], 'readwrite');
var store = tran.objectStore('user');
var updata = store.put({Id:1001,username:"張一",sex:"男",age:"18",mobile:"12345678901"});
}
//自動(dòng)更新主鍵Id為1001的數(shù)據(jù)
put()會(huì)自動(dòng)更新主鍵相同的整條數(shù)據(jù) 在索引中不能使用put() 只能在主表中使用
刪除數(shù)據(jù) delete()
function del(db){
var tran = db.transaction(["user"], 'readwrite');
var store = tran.objectStore('user');
store.delete(1001);
//刪除主鍵 Id為1001的數(shù)據(jù)
}
delete()參數(shù)為主鍵
在線
客服
服務(wù)時(shí)間:周一至周日 08:30-18:00
選擇下列產(chǎn)品馬上在線溝通:
客服
熱線
7*24小時(shí)客服服務(wù)熱線
關(guān)注
微信
關(guān)注官方微信