亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

前端 indexedDB的基本應(yīng)用操作 創(chuàng)建庫 增刪改查

來源: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)更新主鍵Id1001的數(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);

   //刪除主鍵 Id1001的數(shù)據(jù)

}

delete()參數(shù)為主鍵

 


標(biāo)簽: PHP 環(huán)境搭建
分享:
評(píng)論:
你還沒有登錄,請(qǐng)先