摘要:以下是一個在事件處理程序中創建對象存儲空間的例子上例具有以下作用在回調之前作用,可以通過訪問到剛剛創建的數據庫。
前言:這是一篇譯文(原文),雖然在《高程3》第23章有IDB的更詳細介紹,但是有點過時了,這篇文章基本概括了IDB的簡單知識點,如果需要更詳盡的了解可以參照IDB標準。
簡介HTML5提供的API中包括IndexedDB API。相比web storage API以鍵值對的形式在客戶端存儲數據,IDB是一種更為成熟的索引數據庫。通過使用IDB,可以更好的構建離線web應用,并且通過將數據存儲在瀏覽器而非服務器一側,降低了服務器和瀏覽器的交互次數,提高了性能。本文主要介紹IDB API的基本概念。
1)背景:什么是IDB?IDB API源于瀏覽器自帶的index database,該數據庫包含簡單值和對象的記錄。每個記錄都包含鍵名和以及對應的值,這些值可以是對象或者基本數據類型。IDB API有兩種形式:同步或者異步。一般都是使用異步API。IDB API通過window.indexedDB對象實現,這個API在各大瀏覽器的支持形式并不統一,一般使用瀏覽器的前綴區別。
因此,為了實現跨瀏覽器兼容,最好在使用IDB API之前進行一個聲明:
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;2)創建數據庫
在使用IDB之前需要創建一個數據庫。由于數據庫是異步工作模式,調用open()方法將會返回一個IDBRequest對象,通過這個對象可以綁定成功或錯誤的事件處理程序。以下是一個實例:
var db; var request = indexedDB.open("TestDatabase"); request.onerror = function(evt) { console.log("Database error code: " + evt.target.errorCode); }; request.onsuccess = function(evt) { db = request.result; };
在上例中,調用open()創建了名為TestDatabase的IDB數據庫。隨后給返回的IDBRequest對象綁定了onerror和onsuccess事件處理程序。在onsuccess回調函數中,可以通過IDBRequest對象的 result屬性得到數據庫對象,留待隨后使用。
實際上,open()函數包含的第二個參數沒有顯式列出,第二個參數一般是數據庫版本號。該參數用來更改數據庫版本,如果數據庫版本比參數表示的版本低,將會觸發upgradeneeded事件,并在其事件處理程序中改變數據庫結構。更改版本號是唯一可以改變數據庫結構的方式。
一個IDB數據庫可以包含對個對象存儲空間,一個對象存儲空間類似于關系型數據庫(如MySQL中)中的表。可以使用IDBRequest對象的createObjectStore()方法創建對象空間,該方法包含兩個參數,第一個參數是對象空間的名字,另一個是選項對象,包含keyPath屬性和keyGenerator值,keyPath屬性是空間中要保存的對象的屬性,這個屬性將作為存儲空間的鍵來使用。如果對象中沒有具有確切名字的屬性可以keyPath,可以使用autoIncrement作為keyGeneraotr。autoIncrement可以表示任意對象屬性。
對象存儲空間可以具有進行數據檢索的索引,索引可以通過對象存儲空間的createIndex()創建,具有三個參數:索引名、放置索引的屬性名、以及選項對象。以下是一個在ungradeneeded事件處理程序中創建對象存儲空間的例子:
var peopleData = [ { name: "John Dow", email: "john@company.com" }, { name: "Don Dow", email: "don@company.com" } ]; function initDb() { var request = indexedDB.open("PeopleDB", 1); request.onsuccess = function (evt) { db = request.result; }; request.onerror = function (evt) { console.log("IndexedDB error: " + evt.target.errorCode); }; request.onupgradeneeded = function (evt) { var objectStore = evt.currentTarget.result.createObjectStore("people", { keyPath: "id", autoIncrement: true }); objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true }); for (i in peopleData) { objectStore.add(peopleData[i]); } }; }
上例具有以下作用:
1)ongradeneeded在Onsuccess回調之前作用,可以通過evt.currentTarget.result訪問到剛剛創建的數據庫。
2)keyPath屬性“id”在對象中并不存在,因此使用autoincrement產生自增的keyGenerator。
3)在創建索引的時候可以使用unique限制索引值得唯一性。
4)對象存儲空間的add()或put()方法可以添加數據。
當創建了對象存儲空間并添加過數據之后,自然就需要訪問數據。訪問數據要通過IDBTransaction對象,這個對象也不具有瀏覽器兼容性,因此要進行跨瀏覽器聲明:
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
這個IDBTransaction對象有三種模式:read-only, read/write and snapshot。一般情況下事務默認為可讀模式。取得了事務的索引之后,通過objectStore()方法并傳入存儲空間的名稱,就可以訪問特定的存儲空間,然后就可以通過get()/add()/put()/delete()/clear()方法進行數據的檢索、增加、刪除。事務處理是異步響應,因此返回請求對象,對這個請求對象可以綁定onerror、onsuccess和oncomplete事件處理程序。
var transaction = db.transaction("people", IDBTransaction.READ_WRITE); var objectStore = transaction.objectStore("people"); var request = objectStore.add({ name: name, email: email }); request.onsuccess = function (evt) { // do something when the add succeeded };5) 檢索數據—游標
通過事務的get()方法可以檢索數據,但是這需要你事先知道數據的keyPath。除此之外還可以通過游標檢索數據,在事務指定的對象存儲空間上使用openCursor()方法創建游標,該方法也是返回一個請求對象,可以綁定onerror或onsuccess。在onsuccess事件處理程序中通過event.target.result取得存儲空間的下一個對象, 在結果集中有下一項時,這個屬性中保存一個 IDBCursor 的實例,在沒有下一項時,這個屬性的值為 null。 IDBCursor 的實例有以下幾個屬性。
a) direction:數值,表示游標移動的方向。默認值為 IDBCursor.NEXT(0),表示下一項。 IDBCursor.NEXT_NO_DUPLICATE(1)表示下一個不重復的項,DBCursor.PREV(2)表示前一項,而IDBCursor.PREV_NO_DUPLICATE 表示前一個不重復的項。
b) key:對象的鍵。
c) value:實際的對象。
d) primaryKey:游標使用的鍵。可能是對象鍵,也可能是索引鍵。
默認情況下,每個游標只發起一次請求,因此,還需要移動游標實現存儲空間的遍歷。這就依靠下面的方法:
a)continue(key):移動到結果集中的下一項。參數 key
是可選的,不指定這個參數,游標移動到下一項;指定這個參數,游標會移動到指定鍵的位置。
b)advance(count):向前移動 count 指定的項數。這兩個方法都會導致游標使用相同的請求,因此相同的 onsuccess
和 onerror 事件處理程序也會得到重用。
一個實例:
var transaction = db.transaction("people", IDBTransaction.READ_WRITE); var objectStore = transaction.objectStore("people"); var request = objectStore.openCursor(); request.onsuccess = function(evt) { var cursor = evt.target.result; if (cursor) { output.textContent += "id: " + cursor.key + " is " + cursor.value.name + " "; cursor.continue(); } else { console.log("No more entries!"); } };
上例在名為people的對象存儲空間上創建事務,然后在該存儲空間上通過openCursor()創建游標,在返回的請求對象上調用evt.target.result得到對象實例,然后通過對象實例的key和value屬性填充名為output的DIV。最后通過continue()方法進行遍歷。
6) IDB和web storage對比當需要存儲少量的鍵值對數據時,web storage比IDB更合適;但是當需要存儲更多數據并且需要快速檢索時,使用IDB更合適。兩者是互補的關系。IDB的標準可以參照這個。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80875.html
摘要:以下是一個在事件處理程序中創建對象存儲空間的例子上例具有以下作用在回調之前作用,可以通過訪問到剛剛創建的數據庫。 前言:這是一篇譯文(原文),雖然在《高程3》第23章有IDB的更詳細介紹,但是有點過時了,這篇文章基本概括了IDB的簡單知識點,如果需要更詳盡的了解可以參照IDB標準。 簡介 HTML5提供的API中包括IndexedDB API。相比web storage API以鍵值對...
摘要:兼容的正則表達式已經實現了很多使用不同解析引擎的正則函數。中主要有兩個正則解析器一個稱為,另一個稱為兼容正則表達式。在中,每個正則表達式模式都是使用符合格式的字符串。 原文鏈接: Getting Started with PHP Regular Expressions Last-Modified: 2019年5月10日16:23:19譯者注: 本文是面向0正則基礎的phper, 很多...
摘要:前端日報精選精讀個最佳特性翻譯輕量級函數式編程第章組合函數之組件類型寫的姿勢中文周二放送面試題詳解知乎專欄譯原生值得學習嗎答案是肯定的掘金個超贊的視覺效果眾成翻譯布局時常見總結騰訊前端團隊社區歸檔打地鼠入門學習書籍 2017-08-30 前端日報 精選 精讀《Web fonts: when you need them, when you don’t》10個最佳ES6特性翻譯 -《Jav...
In [1]: from pandas import Series, DataFrame In [2]: import pandas as pd In [3]: obj = Series([4,7,-5,3]) In [4]: obj Out[4]: 0 4 1 7 2 -5 3 3 dtype: int64
閱讀 675·2021-09-30 09:47
閱讀 2869·2021-09-04 16:40
閱讀 853·2019-08-30 13:18
閱讀 3447·2019-08-29 16:22
閱讀 1551·2019-08-29 12:36
閱讀 583·2019-08-29 11:11
閱讀 1475·2019-08-26 13:47
閱讀 1128·2019-08-26 13:32