久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      html5使用indexdb的代碼實例分享(圖文)

      前面說過html5對于離線應(yīng)用的支持是很好的,不禁支持localstorage這樣在客戶端存儲一個鍵值對的方式而且還可以引用manifest文件,將需要緩存的文件在其中定義,其實html5中還可以使用indexdb,又稱索引數(shù)據(jù)庫,該數(shù)據(jù)庫可以用來存儲離線對象。下面開始:

      請求完成后的回調(diào)

      所有的請求完成之后都會有一個回調(diào),onsuccess 和onerror,其中:onsuccess表示請求成功時候的回調(diào),onerror 表示請求失敗時候的回調(diào)。同時還可以使用javascript中的 try/catch來捕獲異常,在進(jìn)一步的處理。

      使用數(shù)據(jù)庫

      一個數(shù)據(jù)庫一次只能有一個版本,初次創(chuàng)建改數(shù)據(jù)庫的時候版本號是0,當(dāng)我們需要更改已經(jīng)創(chuàng)建好的數(shù)據(jù)庫時候,就需要更改其版本號,當(dāng)更改 版本號的時候,會觸發(fā)upgradeneeded回調(diào),所以修改數(shù)據(jù)庫或者存儲對象的方法必須放到upgradeneeded方法中執(zhí)行。

      判斷當(dāng)前瀏覽器是否支持indexdb

      if (!window.indexedDB) {      window.alert("您的瀏覽器不支持indexdb");  }<!--這里indexDB是window對象的屬性,類似于alert所以window可以省略-->

      創(chuàng)建數(shù)據(jù)庫

      <!DOCTYPE html><html lang="en"><head>      <meta charset="UTF-8">      <title>Document</title>      <script type="text/javascript">          function createDatabase(indexDbName) {              //調(diào)用 open 方法并傳遞數(shù)據(jù)庫名稱。如果不存在具有指定名稱的數(shù)據(jù)庫,則會創(chuàng)建該數(shù)據(jù)庫              var openRequest = indexedDB.open(indexDbName);            var db;              openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)                  console.log("Database error: " + e.target.errorCode);              };              openRequest.onsuccess = function(event) {                  console.log("Database created");                  db = openRequest.result;//創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  //alert("this is :"+db);              };              openRequest.onupgradeneeded = function (evt) {//更改數(shù)據(jù)庫,或者存儲對象時候在這里處理                };          }    </script></head><body>      <a href="javascript:createDatabase('firstdb')">createDatabase</a></body></html>

      上面這段代碼可以創(chuàng)建一個數(shù)據(jù)庫到客戶端。
      html5使用indexdb的代碼實例分享(圖文)

      刪除數(shù)據(jù)庫

      通過調(diào)用 deleteDatabase 方法,并且傳入需要刪除的數(shù)據(jù)庫名稱來刪除現(xiàn)有數(shù)據(jù)庫。

      function deleteDatabase(indexDbName) {      var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);      deleteDbRequest.onsuccess = function (event) {          console.log("detete database success");      };      deleteDbRequest.onerror = function (e) {          console.log("Database error: " + e.target.errorCode);      };  }

      存儲數(shù)據(jù)

      objectstore

      在indexdb中沒有表的概念,而是使用objectstore來存儲對象的,一個數(shù)據(jù)庫中可以包含多個objectStore,objectStore是一個靈活的數(shù)據(jù)結(jié)構(gòu),可以存放多種類型數(shù)據(jù)。我們可以使用每條記錄中的某個指定字段作為鍵值(keyPath),也可以使用自動生成的遞增數(shù)字作為鍵值(keyGenerator),也可以不指定。選擇鍵的類型不同,objectStore可以存儲的數(shù)據(jù)結(jié)構(gòu)也有差異

      事物

      在更新數(shù)據(jù)庫內(nèi)容或者插入新的數(shù)據(jù)時候,需要首先開啟到事物,并且需要制定當(dāng)前事物操作了那些objectstore。

      事務(wù)具有三種模式

      • 只讀:read,不能修改數(shù)據(jù)庫數(shù)據(jù),可以并發(fā)執(zhí)行

      • 讀寫:readwrite,可以進(jìn)行讀寫操作

      • 版本變更:verionchange

      因為對新數(shù)據(jù)的操作都需要在transaction中進(jìn)行,而transaction又要求指定object store,所以我們只能在創(chuàng)建數(shù)據(jù)庫的時候初始化object store以供后面使用。

      指定keyid添加數(shù)據(jù)

      指定keyid,可以理解為指定一個主鍵

      //添加數(shù)據(jù)          function insertAnObj(indexDbName) {              var userinfos=[{                                   id:1001,                                   name:"小李",                                   age:24                               },{                                   id:1002,                                   name:"老王",                                   age:30                               },{                                   id:1003,                                   name:"王麻子",                                   age:26                               }];                                          var openRequest = indexedDB.open(indexDbName,1);              openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)                  console.log("Database error: " + e.target.errorCode);              };              openRequest.onsuccess = function(event) {                  console.log("Database created");                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  //alert("this is :"+db);                  //打開和userinfo相關(guān)的objectstore的事物                  var transaction = db.transaction("userinfo",'readwrite');                   var store=transaction.objectStore("userinfo");                                  for(var i=0;i<userinfos.length;i++){                                      //alert("add"+userinfos[i]);                      store.add(userinfos[i]);//將對象添加至userinfo相關(guān)的objectstore中                  }              };              openRequest.onupgradeneeded = function(event) {                 var db = event.target.result;                                 //在第一次創(chuàng)建數(shù)據(jù)庫的時候,就創(chuàng)建userinfo相關(guān)的objectstore,以供后面添加數(shù)據(jù)時候使用                  if(!db.objectStoreNames.contains('userinfo')){                                      //keyPath:Javascript對象,對象必須有一屬性作為鍵值                      db.createObjectStore('userinfo',{keyPath:"id"});                  }                }  }

      html5使用indexdb的代碼實例分享(圖文)

      使用autoIncrement添加數(shù)據(jù)

      指定autoIncrement,可以理解為指定了一個主鍵自動增長。

      //指定主鍵自動增長          function insertAutoInc(indexDbName) {              var userinfos=[{                                   id:1001,                                   name:"小李",                                   age:24                               },{                                   id:1002,                                   name:"老王",                                   age:30                               },{                                   id:1003,                                   name:"王麻子",                                   age:26                               }];                                          var openRequest = indexedDB.open(indexDbName,2);              openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)                  console.log("Database error: " + e.target.errorCode);              };              openRequest.onsuccess = function(event) {                  console.log("Database created");                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  //alert("this is :"+db);                  //打開和userinfo相關(guān)的objectstore的事物                  var transaction = db.transaction("userinfo",'readwrite');                   var store=transaction.objectStore("userinfo");                                  for(var i=0;i<userinfos.length;i++){                                      //alert("add"+userinfos[i]);                      store.add(userinfos[i]);//將對象添加至userinfo相關(guān)的objectstore中                  }              };              openRequest.onupgradeneeded = function(event) {                 var db = event.target.result;                                 //在第一次創(chuàng)建數(shù)據(jù)庫的時候,就創(chuàng)建userinfo相關(guān)的objectstore,以供后面添加數(shù)據(jù)時候使用                  if(!db.objectStoreNames.contains('userinfo')){                                      //keyPath:Javascript對象,對象必須有一屬性作為鍵值                      db.createObjectStore('userinfo',{autoIncrement: true});                  }              }  }

      html5使用indexdb的代碼實例分享(圖文)

      查找數(shù)據(jù)

      根據(jù)id查找數(shù)據(jù)

      之前我們已經(jīng)添加過了定義key為autoincreament類型方式的數(shù)據(jù),現(xiàn)在就可以根據(jù)id來查找單條數(shù)據(jù)了。

      function findDbdata(indexDbName,value) {              var openRequest = indexedDB.open(indexDbName);                          var db;              openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)                  console.log("Database error: " + e.target.errorCode);              };              openRequest.onsuccess = function(event) {                  console.log("Database created");                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  var transaction = db.transaction("userinfo",'readwrite');                                  var objectStore = transaction.objectStore("userinfo");                                  //var cursor = objectStore.openCursor();                  var request = objectStore.get(Number(1));//查找i=1的對象,這里使用Number將1轉(zhuǎn)換成數(shù)值類型                  request.onsuccess = function(e) {                      var res = e.target.result; //查找成功時候返回的結(jié)果對象                      console.dir(res);                                          if (res) {                                              for (var field in res) { //遍歷每一個對象屬性                              console.log(field+":"+res[field]);                                                          // alert(res[field]);                          };                      };                  }              };              openRequest.onupgradeneeded = function (event) {//更改數(shù)據(jù)庫,或者存儲對象時候在這里處理                };  }

      html5使用indexdb的代碼實例分享(圖文)

      查找所有數(shù)據(jù)

      function findAllDbdata(indexDbName) {              var openRequest = indexedDB.open(indexDbName);                          var db;              openRequest.onsuccess = function(event) {                  console.log("Database created");                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  var transaction = db.transaction("userinfo",'readonly');                                  var objectStore = transaction.objectStore("userinfo");                                  var cursor = objectStore.openCursor();                  cursor.onsuccess = function(e) {                       var res = e.target.result;                       if(res) {                           console.log("Key", res.key);                           var request = objectStore.get(Number(res.key));//根據(jù)查找出來的id,再次逐個查找                          request.onsuccess = function(e) {                              var res = e.target.result; //查找成功時候返回的結(jié)果對象                              //console.dir(res);                              if (res) {                                                              for (var field in res) { //遍歷每一個對象屬性                                      console.log(field+":"+res[field]);                                                            // alert(res[field]);                                  };                              };                          }                          res.continue();                       }                   }                 };          }

      html5使用indexdb的代碼實例分享(圖文)

      根據(jù)id刪除數(shù)據(jù)

      刪除跟新增一樣,需要創(chuàng)建事務(wù),然后調(diào)用刪除接口delete來刪除數(shù)據(jù)

      function deleteDataById(indexDbName) {              var openRequest = indexedDB.open(indexDbName);                          var db;              openRequest.onsuccess = function(event) {                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  var transaction = db.transaction("userinfo",'readwrite');                                  var objectStore = transaction.objectStore("userinfo");                                  var request = objectStore.delete(Number(2));//根據(jù)查找出來的id,再次逐個查找                  request.onsuccess = function(e) {                      console.log("delete success");                  }              }          }

      刪除所有數(shù)據(jù)

      通過objectstore.clear()刪除所有的數(shù)據(jù)。

      function deleteAllData(indexDbName) {              var openRequest = indexedDB.open(indexDbName);                          var db;              openRequest.onsuccess = function(event) {                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  var transaction = db.transaction("userinfo",'readwrite');                                  var objectStore = transaction.objectStore("userinfo");                  objectStore.clear();              }             }

      創(chuàng)建索引

      我們可以在創(chuàng)建object store的時候指明索引,使用object store的createIndex創(chuàng)建索引,方法有三個參數(shù)

      • 索引名稱

      • 索引屬性字段名

      • 索引屬性值是否唯一
        這里我新創(chuàng)建一個數(shù)據(jù)庫,并且設(shè)置基于name和age的索引:

      //指定主鍵自動增長          function insertAutoInc(indexDbName) {              var userinfos=[{                                   id:1001,                                   name:"小李",                                   age:24                               },{                                   id:1002,                                   name:"老王",                                   age:30                               },{                                   id:1003,                                   name:"王麻子",                                   age:26                               }];                                          var openRequest = indexedDB.open(indexDbName,2);              openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)                  console.log("Database error: " + e.target.errorCode);              };              openRequest.onsuccess = function(event) {                  console.log("Database created");                  db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫                  //alert("this is :"+db);                  //打開和userinfo相關(guān)的objectstore的事物                  var transaction = db.transaction("userinfo",'readwrite');                   var store=transaction.objectStore("userinfo");                                  for(var i=0;i<userinfos.length;i++){                                      //alert("add"+userinfos[i]);                      store.add(userinfos[i]);//將對象添加至userinfo相關(guān)的objectstore中                  }              };              openRequest.onupgradeneeded = function(event) {                 var db = event.target.result;                                 //在第一次創(chuàng)建數(shù)據(jù)庫的時候,就創(chuàng)建userinfo相關(guān)的objectstore,以供后面添加數(shù)據(jù)時候使用                  if(!db.objectStoreNames.contains('userinfo')){                                      //keyPath:Javascript對象,對象必須有一屬性作為鍵值                      var objectStore = db.createObjectStore('userinfo',{autoIncrement: true});                      objectStore.createIndex('nameIndex','name',{unique:true});//這里假定名字不能重復(fù),創(chuàng)建基于name的唯一索引                      objectStore.createIndex('ageIndex','age',{unique:false});//創(chuàng)建基于age的索引                  }              }          }

      html5使用indexdb的代碼實例分享(圖文)
      html5使用indexdb的代碼實例分享(圖文)

      利用索引查詢數(shù)據(jù)

      可以利用索引快速獲取數(shù)據(jù),name的索引是唯一的沒問題,但是對于age索引只會取到第一個匹配值,要想得到所有age符合條件的值就需要使用游標(biāo)了

       function getDataByIndex(indexDbName) {          var openRequest = indexedDB.open(indexDbName);        var db;          openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)              console.log("Database error: " + e.target.errorCode);          };          openRequest.onsuccess = function(event) {              console.log("Database created");              db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫              var transaction = db.transaction("userinfo",'readwrite');                          var objectStore = transaction.objectStore("userinfo");                          var nameIndex = objectStore.index("nameIndex"); //獲得nameIndex索引              nameIndex.get("小李").onsuccess = function(e) { //根據(jù)name索引獲得數(shù)據(jù)成功的回調(diào)                 var userinfo = e.target.result;                 console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);              }          }      }

      html5使用indexdb的代碼實例分享(圖文)

      游標(biāo)和索引結(jié)合使用

      剛才我們不僅創(chuàng)建了一個name的唯一索引,而且還創(chuàng)建了一個age的索引,如果我們根據(jù)age來獲取數(shù)據(jù),有可能會有多條,由于age不唯一,所以這個時候就需要使用游標(biāo)來遍歷數(shù)據(jù)。這里我先插入兩條age=24的記錄。
      html5使用indexdb的代碼實例分享(圖文)

      function getDataByAgeIndex(indexDbName) {          var openRequest = indexedDB.open(indexDbName);        var db;          openRequest.onerror = function(e) {//當(dāng)創(chuàng)建數(shù)據(jù)庫失敗時候的回調(diào)              console.log("Database error: " + e.target.errorCode);          };          openRequest.onsuccess = function(event) {              console.log("Database created");              db = openRequest.result; //創(chuàng)建數(shù)據(jù)庫成功時候,將結(jié)果給db,此時db就是當(dāng)前數(shù)據(jù)庫              var transaction = db.transaction("userinfo",'readwrite');                          var objectStore = transaction.objectStore("userinfo");                          var nameIndex = objectStore.index("ageIndex"); //獲得ageIndex索引              var request = nameIndex.openCursor();//openCursor沒有參數(shù)的時候,表示獲得所有數(shù)據(jù)              request.onsuccess = function(e) {//openCursor成功的時候回調(diào)該方法                var cursor = e.target.result;              if (cursor) {//循環(huán)遍歷cursor                  var userinfo = cursor.value;                //alert(userinfo.name);                  console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);                  cursor.continue();                };              }          }      }

      html5使用indexdb的代碼實例分享(圖文)
      同時可以在opencursor的時候傳入key range,來限制范圍。
      IDBKeyRange.only(value):只獲取指定數(shù)據(jù)
      IDBKeyRange.lowerBound(value,isOpen):獲取最小是value的數(shù)據(jù),第二個參數(shù)用來指示是否排除value值本身,也就是數(shù)學(xué)中的是否是開區(qū)間
      IDBKeyRange.upperBound(value,isOpen):和上面類似,用于獲取最大值是value的數(shù)據(jù)
      IDBKeyRange.bound(value1,value2,isOpen1,isOpen2):表示在value1和value2之間,是否包含value1和value2

      這里為了演示方便,我先刪除之前的數(shù)據(jù)庫,重新插入更多的數(shù)據(jù),現(xiàn)在所有數(shù)據(jù)如下:
      html5使用indexdb的代碼實例分享(圖文)
      IDBKeyRange.only(value)
      這里只需要在上面opencursor的時候?qū)⒃撓拗茥l件傳入即可,其他代碼將保持不變,如下:

      var request = nameIndex.openCursor(IDBKeyRange.only(Number(24)));

      這里只根據(jù)age索引查詢age==24的所有數(shù)據(jù)。
      html5使用indexdb的代碼實例分享(圖文)
      IDBKeyRange.lowerBound(value,isOpen)
      在使用IDBKeyRange.lowerBound(28,true)來獲取年齡大于28的并且包含28歲的所有數(shù)據(jù)。

      var request = nameIndex.openCursor(IDBKeyRange.lowerBound(Number(28),true));

      html5使用indexdb的代碼實例分享(圖文)

      ok,今天就到這里了,希望大家喜歡。

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號