萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> Html5 >> 深入解析HTML5中的IndexedDB索引數據庫

深入解析HTML5中的IndexedDB索引數據庫

   介紹

  IndexedDB是HTML5 WEB數據庫,允許HTML5 WEB應用在用戶浏覽器端存儲數據。對於應用來說IndexedDB非常強大、有用,可以在客戶端的chrome,IE,Firefox等WEB浏覽器中存儲大量數據,下面簡單介紹一下IndexedDB的基本概念。

  什麼是IndexedDB

  IndexedDB,HTML5新的數據存儲,可以在客戶端存儲、操作數據,可以使應用加載地更快,更好地響應。它不同於關系型數據庫,擁有數據表、記錄。它影響著我們設計和創建應用程序的方式。IndexedDB 創建有數據類型和簡單的JavaScript持久對象的object,每個object可以有索引,使其有效地查詢和遍歷整個集合。本文為您提供了如何在Web應用程序中使用IndexedDB的真實例子。

  開始

  我們需要在執行前包含下面前置代碼

  JavaScript Code復制內容到剪貼板

  var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

  //prefixes of window.IDB objects

  var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

  var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

  if (!indexedDB) {

  alert("Your browser doesn't support a stable version of IndexedDB.")

  }

  打開IndexedDB

  在創建數據庫之前,我們首先需要為數據庫創建數據,假設我們有如下的用戶信息:

  JavaScript Code復制內容到剪貼板

  var userData = [

  { id: "1", name: "Tapas", age: 33, email: "[email protected]" },

  { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }

  ];

  現在我們需要用open()方法打開我們的數據庫:

  JavaScript Code復制內容到剪貼板

  var db;

  var request = indexedDB.open("databaseName", 1);

  request.onerror = function(e) {

  console.log("error: ", e);

  };

  request.onsuccess = function(e) {

  db = request.result;

  console.log("success: "+ db);

  };

  request.onupgradeneeded = function(e) {

  }

  如上所示,我們已經打開了名為"databaseName",指定版本號的數據庫,open()方法有兩個參數:

  1.第一個參數是數據庫名稱,它會檢測名稱為"databaseName"的數據庫是否已經存在,如果存在則打開它,否則創建新的數據庫。

  2.第二個參數是數據庫的版本,用於用戶更新數據庫結構。

  onSuccess處理

  發生成功事件時“onSuccess”被觸發,如果所有成功的請求都在此處理,我們可以通過賦值給db變量保存請求的結果供以後使用。

  onerror的處理程序

  發生錯誤事件時“onerror”被觸發,如果打開數據庫的過程中失敗。

  Onupgradeneeded處理程序

  如果你想更新數據庫(創建,刪除或修改數據庫),那麼你必須實現onupgradeneeded處理程序,使您可以在數據庫中做任何更改。 在“onupgradeneeded”處理程序中是可以改變數據庫的結構的唯一地方。

  創建和添加數據到表:

  IndexedDB使用對象存儲來存儲數據,而不是通過表。 每當一個值存儲在對象存儲中,它與一個鍵相關聯。 它允許我們創建的任何對象存儲索引。 索引允許我們訪問存儲在對象存儲中的值。 下面的代碼顯示了如何創建對象存儲並插入預先准備好的數據:

  JavaScript Code復制內容到剪貼板

  request.onupgradeneeded = function(event) {

  var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});

  for (var i in userData) {

  objectStore.add(userData[i]);

  }

  }

  我們使用createObjectStore()方法創建一個對象存儲。 此方法接受兩個參數: - 存儲的名稱和參數對象。 在這裡,我們有一個名為"users"的對象存儲,並定義了keyPath,這是對象唯一性的屬性。 在這裡,我們使用“id”作為keyPath,這個值在對象存儲中是唯一的,我們必須確保該“ID”的屬性在對象存儲中的每個對象中存在。 一旦創建了對象存儲,我們可以開始使用for循環添加數據進去。

  手動將數據添加到表:

  我們可以手動添加額外的數據到數據庫中。

  JavaScript Code復制內容到剪貼板

  function Add() {

  var request = db.transaction(["users"], "readwrite").objectStore("users")

  .add({ id: "3", name: "Gautam", age: 30, email: "[email protected]" });

  request.onsuccess = function(e) {

  alert("Gautam has been added to the database.");

  };

  request.onerror = function(e) {

  alert("Unable to add the information.");

  }

  }

  之前我們在數據庫中做任何的CRUD操作(讀,寫,修改),必須使用事務。 該transaction()方法是用來指定我們想要進行事務處理的對象存儲。 transaction()方法接受3個參數(第二個和第三個是可選的)。 第一個是我們要處理的對象存儲的列表,第二個指定我們是否要只讀/讀寫,第三個是版本變化。

  從表中讀取數據

  get()方法用於從對象存儲中檢索數據。 我們之前已經設置對象的id作為的keyPath,所以get()方法將查找具有相同id值的對象。 下面的代碼將返回我們命名為“Bidulata”的對象:

  JavaScript Code復制內容到剪貼板

  function Read() {

  var objectStore = db.transaction(["users"]).objectStore("users");

  var request = objectStore.get("2");

  request.onerror = function(event) {

  alert("Unable to retrieve data from database!");

  };

  request.onsuccess = function(event) {

  if(request.result) {

  alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);

  } else {

  alert("Bidulata couldn't be found in your database!");

  }

  };

  }

  從表中讀取所有數據

  下面的方法檢索表中的所有數據。 這裡我們使用游標來檢索對象存儲中的所有數據:

  JavaScript Code復制內容到剪貼板

  function ReadAll() {

  var objectStore = db.transaction("users").objectStore("users");

  var req = objectStore.openCursor();

  req.onsuccess = function(event) {

  db.close();

  var res = event.target.result;

  if (res) {

  alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);

  res.continue();

  }

  };

  req.onerror = function (e) {

  console.log("Error Getting: ", e);

  };

  }

  該openCursor()用於遍歷數據庫中的多個記錄。 在continue()函數中繼續讀取下一條記錄。

  刪除表中的記錄

  下面的方法從對象中刪除記錄。

  JavaScript Code復制內容到剪貼板

  function Remove() {

  var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");

  request.onsuccess = function(event) {

  alert("Tapas's entry has been removed from your database.");

  };

  }

  我們要將對象的keyPath作為參數傳遞給delete()方法。

  最終代碼

  下面的方法從對象源中刪除一條記錄:

  JavaScript Code復制內容到剪貼板

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>IndexedDB</title>
  5. <script type="text/javascript">
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  7.  
  8. //prefixes of window.IDB objects
  9. var IDBTransaction = wi
copyright © 萬盛學電腦網 all rights reserved