23

Indexed Database API

23.1 Indexed Database Web SQL Database 23.2 23.3 23.4 23.5 IDBFactory IDBDatabase 23.5.1 23.5.2 23.5.3

23.7 23.8 23.8.1 23.8.2 23.8.3 23.8.4

SUMMARY

23.6 23.6.1 IDBObjectStore 23.6.2 23.6.3 cursor 23.6.4 23.6.5

23-2

HTML5 ()

11.1 HTML5 HTML5 PART 1

Indexed Database API

HTML5 ()

23-3

23

Indexed Database API

Indexed Database HTML5 ndexed Database API

23.1 Indexed Database Web SQL DatabaseIndexed Database Web SQL Database API Client Web SQL Database W3C 2010 11 W3C Web SQL Database http://www.w3.org/TR/webdatabase/ Abstract

HTML5 Web Web Storage Indexed Database API The Web Applications Working Group continues work on two other storagerelated specifications: Web Storage and Indexed Database API.

W3C Web SQL Database HTML5 SQL Web SQL Database Web SQL Database Indexed Database API 23-2HTML5 ()

23.2IDBFactory

Indexed Database API SQL cursor SQL Indexed Database API SQL API

23.2 IDBFactory database Indexed Database API

object store Indexed Database API IDBFactory

HTML5 ()

23-3

23

Indexed Database API

interface IDBFactory { IDBOpenDBRequest open (DOMString name, [EnforceRange] optional unsigned long long version); IDBOpenDBRequest deleteDatabase (DOMString name); short cmp (any first, any second); };

open() name deleteDatabase name cmp rst second 1 -1 0 open() delete() IDBRequest IDBOpenDBRequest IDBRequest interface IDBRequest : EventTarget { readonly attribute any result; readonly attribute DOMError error; readonly attribute Object source; readonly attribute IDBTransaction transaction; readonly attribute DOMString readyState; [TreatNonCallableAsNull] attribute Function? onsuccess; [TreatNonCallableAsNull] attribute Function? onerror; };

result error source transaction readyState onsuccess onerror pending done success error

23-4

HTML5 ()

23.3

open Indexed Database API

23.3 IDBFactory open() IDBFactory Webkit webkitIndexedDB Gecko mozIndexedDB open() KTMSvar request = webkitIndexedDB.open('KTMS');

Webkit Gecko mozIndexedDB indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB ;

open() var request = indexedDB.open('KTMS');

KTMS open() IDBRequest request onsueecss onerror request.onerror = function (event) { // }; request.onsuccess = function (event) { // event.target.result };

onsuccess event.target.result IDBDatabase

HTML5 ()

23-5

23

Indexed Database API

IDBRequest readyState done pending 23-1

dbopen.html var db; var request = webkitIndexedDB.open('KTMS'); request.onerror = function (event) { alert(event.target.errorCode); }; request.onsuccess = function (event) { db = event.target.result; alert(' [readyState' + this.readyState + ']'); };

open() KTMS success db readyState db IDBDatabase

23-6

HTML5 ()

23.4 IDBDatabase

23.4 IDBDatabase IDBDatabase interface IDBDatabase : EventTarget { readonly attribute DOMString name; readonly attribute unsigned long long version; readonly attribute DOMStringList objectStoreNames; IDBObjectStore createObjectStore (DOMString name, optional IDBObjectStoreParameters optionalParameters); void deleteObjectStore (DOMString name); IDBTransaction transaction (any storeNames, optional DOMString mode); Void close (); [TreatNonCallableAsNull] attribute Function? onabort; [TreatNonCallableAsNull] attribute Function? onerror; [TreatNonCallableAsNull] attribute Function? onversionchange; };

IDBDatabase name version objectStoreNames createObjectStore deleteObjectStore transaction close onabort onerror onversionchange DOMStringList IDBObjectStore abort error versionchange

objectStoreNames DOMStringList createObjectStore()

HTML5 ()

23-7

23

Indexed Database API

IDBObjectStore deleteObjectStore() createObjectStore() deleteObjectStore() close() void close();

closePending true closePending false true

23.5

23.5.1 IDBDatabase version version long var request = indexedDB.open('KTMS', n);

23-8

HTML5 ()

23.5

open() n n KTMS upgradeneeded n n error upgradeneeded 23-2

62 65

66

HTML5 ()

23-9

23

Indexed Database API

dbVersion-demo.html

messagev id version dbname KTMS onload window.onload = function () { requestName = document.getElementById('dbname').value; request = indexedDB.open(requestName); request.onsuccess = function (event) { db = event.target.result; document.getElementById('messagev').innerHTML = ' ' + db.name + ' / ' + db.version; db.close(); }; };

name 23-10HTML5 ()

23.5

version function click_handler() { var version = parseInt(document.getElementById('version').value); request = indexedDB.open(requestName, version); request.onerror = function (event) { document.getElementById('message').innerHTML = ' ' + event.target.errorCode; }; request.onsuccess = function (event) { db = event.target.result; document.getElementById('message').innerHTML = (' /' + db.version); }; request.onupgradeneeded = function (event) { alert(' ' + event.oldVersion + '/' + event.newVersion); alert(' ' + event.target.result.version); }; db.close(); }

open() version upgradeneeded event oldVersion newVersion error success upgradeneeded

23.5.2 IDBDatabase objectStoreNames

HTML5 ()

23-11

23

Indexed Database API

readonly attribute DOMStringList objectStoreNames;

DOMStringList 23-3

KTMS KTMS objectStore-list.html var reuestName = 'KTMS'; var version; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function listObjectSore() { var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; var stores = db.objectStoreNames; var length = db.objectStoreNames.length; var storenames = ''; for (var i = 0; i < length; i++) {

()

23-12

HTML5 ()

23.5

storenames += '' + stores[i] + ''; } version = db.version; document.getElementById('message').innerHTML = ' / ' + db.name + '/' + db.version + '' + '

' + storenames + '

'; db.close(); }; } window.onload = function () { listObjectSore(); };

KTMS db objectStoreNames for

23.5.3 IDBDatabase createObjectStore IDBObjectStore createObjectStore ( DOMString name, optional IDBObjectStoreParameters optionalParameters);

name optionalParameters DOMException InvalidStateError ConstraintError InvalidAccessError versionchange autoIncrement ture keyPath

HTML5 ()

23-13

23

Indexed Database API

InvalidStateError createObjectStore() upgradeneeded ConstraintError name InvalidAccessError createObjectStore() IDBObjectStore deleteObjectStore() Void deleteObjectStore (DOMString name);

name InvalidStateError NotFoundError versionchange

NotFoundError InvalidStateError createObjectStore() createObjectStore() deleteObjectStore()

23-14

HTML5 ()

23.5

23-4

23-3 objectStore-demo.html var requestName = 'KTMS'; var version; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function addOS() { version++; var db; var request = indexedDB.open(requestName, version); request.onupgradeneeded = function (event) { try{ var osname = document.getElementById('osname').value; db = event.target.result;

()

HTML5 ()

23-15

23

Indexed Database API

var objectStore = db.createObjectStore(osname); alert(' !'); } catch (e) { alert(e.toLocaleString()); } finally { db.close(); listObjectSore(); } } } function deleteOS() { version++; var db; var request = indexedDB.open(requestName, version); request.onupgradeneeded = function (event) { try { var osname = document.getElementById('osname').value; db = event.target.result; db.deleteObjectStore(osname); alert(' !'); } catch (e) { alert(e.toLocaleString()); } finally { db.close(); listObjectSore(); } } } function listObjectSore() { // } window.onload = function () { listObjectSore(); };

addOS() createObjectStore() try-catch click deleteOS() deleteObjectStore() try-catch

23-16

HTML5 ()

23.6

listObjectSore()

23.6 IDBObjectStore

23.6.1 IDBObjectStore Indexed Database Object Store Table record IDBObjectStore interface IDBObjectStore { readonly attribute DOMString name; readonly attribute DOMString keyPath; readonly attribute DOMStringList indexNames; readonly attribute IDBTransaction transaction; readonly attribute boolean autoIncremenent;; IDBRequest put (any value, optional any key); IDBRequest add (any value, optional any key); IDBRequest delete (any key); IDBRequest get (any key); IDBRequest clear (); IDBRequest openCursor (optional any? range, optional DOMString direction); IDBIndex createIndex (DOMString name, any keyPath, optional IDBIndexParameters optionalParameters); IDBIndex index (DOMString name); void deleteIndex (DOMString indexName); IDBRequest count (optional any key); };

nameHTML5 ()

23-17

23

Indexed Database API

null keyPath key key path indexNames transaction autoIncremenent put() add() delete() get() clear() createIndex() index() deleteIndex() openCursor() count() value IDBCursorWithValue cursor key IDBRequest

IDBObjectStore

23.6.2 createObjectStore() IDBObjectStore IDBTransaction IDBDatabase transaction() var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName);

23-18

HTML5 ()

23.6

db objectStoreName objectStoreName objectStore() Transaction() IDBTransaction transaction ( any storeNames, optional DOMString mode);

readonly readwrite versionchange

transaction() InvalidStateError NotFoundError TypeError InvalidAccessError transaction() IDBDatabase Close() mode

CRUD IDBTransaction objectStore() IDBObjectStore objectStore (in DOMString name)

name name NotFoundError objectStore() IDBObjectStore

HTML5 ()

23-19

23

Indexed Database API

add() delete()

23.6.3 cursor Cursor IDBObjectStore openCursor() IDBRequest openCursor ( optional any? range, optional DOMString direction)

success IDBCursorWithValue cursor success interface IDBCursorWithValue : IDBCursor { readonly attribute any value; };

value IDBCursor key IDBCursor interface IDBCursor { readonly attribute Object source; readonly attribute DOMString direction; readonly attribute any key; readonly attribute any primaryKey; IDBRequest update (any value); void advance ([EnforceRange] unsigned long count); void continue (optional any key); IDBRequest delete (); }

key continue() 23-20HTML5 ()

23.6

openCursor() IDBRequest 23-5 cursor

objectStore-data-list.html var reuestName = 'KTMS'; var objectStoreName = 'OS1'; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function list() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var crequest = store.openCursor() var message = '

• '; crequest.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { message += ( '

• ' + key/value" + '' + cursor.key + "/" + cursor.value +

  ()

  HTML5 ()

  23-21

  23

  Indexed Database API

  ''); cursor.continue(); } else { message += '

' } document.getElementById('message').innerHTML = message; }; } catch (e) { alert(e); } } window.onload = function () { var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; list(); }; };

list() openCursor() cursor success event cursor key cursor continue() success

23.6.4 IDBObjectStore add() IDBRequest add (any value, optional any key);

value 23-22HTML5 ()

23.6

TransactionInactiveError ReadOnlyError DataError InvalidStateError DataCloneError

key

try-catch delete() add() IDBRequest delete (in any key)

key key TransactionInactiveError ReadOnlyError add() add() delete() 23-6

key/value HTML5 ()

23-23

23

Indexed Database API

objectStore-data.html var reuestName = 'KTMS'; var objectStoreName = 'OS1'; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function delete_click() { try { var transaction = db.transaction( [objectStoreName], 'readwrite'); transaction.oncomplete = function (event) { alert(' !'); }; transaction.onerror = function (event) { alert(event); }; var store = transaction.objectStore(objectStoreName); var key = document.getElementById('key').value; // var request = store.delete(key); request.onsuccess = function (event) { list(); }; request.onerror = function (event) { alert(event); }; } catch (e) { alert(e); } } function add_click(){ try { var transaction = db.transaction( [objectStoreName], 'readwrite'); transaction.oncomplete = function (event) { alert(' !'); }; transaction.onerror = function (event) { alert(event); }; // var store = transaction.objectStore(objectStoreName); var value = document.getElementById('value').value;

()

23-24

HTML5 ()

23.6

var key = document.getElementById('key').value; var request = store.add(value, key); request.onsuccess = function (event) { list(); }; request.onerror = function (event) { alert(event); }; } catch (e) { alert(e); } } window.onload = function () { var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; list(); }; }; function list() { // } key/value /

add_click() add() delete_click() key readwrite HTML5 ()

23-25

23

Indexed Database API

var objectStore = db.createObjectStore(osname, {autoIncrement: true });

createObjectStore() autoIncrement true OSAI {autoIncrement: true } 23-7

1 bjectStore-data-auto.html var reuestName = 'KTMS'; var objectStoreName = 'OSAI'; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function add_click(){ try {

()

23-26

HTML5 ()

23.6

var transaction = db.transaction([objectStoreName], 'readwrite'); // var store = transaction.objectStore(objectStoreName); var value = document.getElementById('value').value; var request = store.add(value); request.onsuccess = function (event) { list(); }; request.onerror = function (event) { alert(event); }; } catch (e) { alert(e); } } window.onload = function () { var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; list(); }; }; function list() { // }

add() OSAI 23.7

23.6.5 get()

HTML5 ()

23-27

23

Indexed Database API

IDBRequest get (any key);

key DataError 23-8

key objectStore-data-get.html var reuestName = 'KTMS'; var objectStoreName = 'OS1'; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; }; function search_click() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var key = document.getElementById('key').value; var request = store.get(key); request.onsuccess = function (event) { var value = request.result; document.getElementById('message').innerHTML = 'key/value' + key + '/' + value; };

()

23-28

HTML5 ()

23.7

request.onerror = function (event) { alert(event); }; } catch (e) { alert(e); } } key

get() success

23.7 JSON indexed Database API { ProductID: 1000001", ProductName: USB 3.0 ", Category: " ", UnitPrice: 1200 }

JSON ProductID ProductName Category UnitPrice

JSON JSON HTML5 ()

23-29

23

Indexed Database API

JSON ProductID ProductID var objectStore = db.createObjectStore('products',{keypath:ProductID});

createObjectStore() products ProductID JSON {keypath:ProductID} Products 23-9 JSON

JSON

23-30

HTML5 ()

23.7

objectStore-data-json-list.html var reuestName = 'KTMS'; var objectStoreName = 'Products'; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function list() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var crequest = store.openCursor() var message = '

• '; crequest.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { message += ('
• ' + id" + cursor.key + "
  " + cursor.value.ProductName + "
  " + cursor.value.UnitPrice + "
  " + cursor.value.Category); cursor.continue(); } else { message += '

' } document.getElementById('message').innerHTML = message; }; } catch (e) { alert(e); } } window.onload = function () { var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; list(); }; };

cursor JSON HTML5 ()

23-31

23

Indexed Database API

message += ('

' + JSON.stringify(cursor.value));

ProductID Products 23-10

objectStore-data-json.html div {margin:10px;width:400px;text-align:left; } var reuestName = 'KTMS'; var objectStoreName = 'Products'; var db; var indexedDB = window.indexedDB || window.mozIndexedDB ||

()

23-32

HTML5 ()

23.7

window.webkitIndexedDB; function add_click() { try { var transaction = db.transaction( [objectStoreName], 'readwrite'); transaction.oncomplete = function (event) { alert(' !'); }; transaction.onerror = function (event) { alert(event); }; // var store = transaction.objectStore(objectStoreName); var data = { ProductID: document.getElementById('ProductID').value, ProductName: document.getElementById('ProductName'). value, Category: document.getElementById('Category').value, UnitPrice: parseInt( document.getElementById('UnitPrice').value) } var request = store.add(data); request.onsuccess = function (event) { alert(' !'); }; request.onerror = function (event) { alert(' '+event.message ); }; } catch (e) { alert(e); } } window.onload = function () { var request = indexedDB.open(reuestName); request.onsuccess = function (event) { db = event.target.result; }; };

HTML5 ()

23-33

23

Indexed Database API

add_Clilck() add() JSON data JSON Indexed Database API

23.8

23.8.1 IDBIndex interface IDBIndex { readonly attribute DOMString name; readonly attribute IDBObjectStore objectStore; readonly attribute DOMString keyPath; readonly attribute boolean multiEntry; readonly attribute boolean unique; IDBRequest openCursor (optional any? range, optional DOMString direction); IDBRequest openKeyCursor (optional any?range, optional DOMString direction); IDBRequest get (any key); IDBRequest getKey (any key); IDBRequest count (optional any key); };

name objectStore ()

23-34

HTML5 ()

23.8

keyPath multiEntry unique openCursor openKeyCursor get getKey count

multiEntry unique cursor cursor

23.8.2 IDBObjectStore indexNames readonly attribute DOMStringList indexNames;

DOMStringList 23-11

HTML5 ()

23-35

23

Indexed Database API

KTMS index-list.html var requestName= 'KTMS'; var objectStoreName = 'Products93'; var version; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; window.onload = function () { var request = indexedDB.open(requestName); request.onsuccess = function (event) { db = event.target.result; version = db.version; var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var indexes = store.indexNames var msg = '

• '; var l = indexes.length; if (l > 0) { for (var i = 0; i < indexes.length; i++) { msg += ('
• ' + indexes[i] + '/' + store.index(indexes[i]).keyPath + ''); } msg += '

' document.getElementById('message').innerHTML = msg; } else { console.log(' ! '); } db.close(); }; };

success indexNames

23-36

HTML5 ()

23.8

0 0 for

23.8.3 IDBObjectStore createIndex() IDBIndex createIndex ( DOMString name, any keyPath, optional IDBIndexParameters optionalParameters);

name keyPath optionalParameters IDBIndexParameters dictionary dictionary IDBIndexParameters { boolean unique = false; boolean multiEntry = false; };

unique false unique true createIndex() InvalidStateError ConstraintError

HTML5 ()

23-37

23

Indexed Database API

23-12

upgradeneeded index-createOS.html var requestName = 'KTMS'; var objectStoreName = 'OS'; var version; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; var db; function addIDX() { version++; var request = indexedDB.open(requestName, version); request.onupgradeneeded = function (event) { try { db = event.target.result; var objectStore = db.createObjectStore( objectStoreName + version.toString()); var name = document.getElementById('idxname').value; var keyPath = document.getElementById('idxkeyPath').value; objectStore.createIndex(name, keyPath); alert(' !'); } catch (e) { alert(e.toLocaleString()); } finally { if (db) { db.close(); console.log(' '); }

()

23-38

HTML5 ()

23.8

} } } window.onload = function () { var request = indexedDB.open(requestName); request.onsuccess = function (event) { db = event.target.result; version = db.version; db.close(); } };

createIndex() OS void deleteIndex(DOMString indexName);

indexName indexName InvalidStateError ConstraintError

HTML5 ()

23-39

23

Indexed Database API

23-13

index-deom.html var requestName = 'KTMS'; var objectStoreName = 'Products'; var version; var db; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; function list() { // } window.onload = function () { list(); }; function createIDX() { version++; var request = indexedDB.open(requestName, version); request.onupgradeneeded = function (event) { try {

()

23-40

HTML5 ()

23.8

db = event.target.result; var transaction = event.target.transaction; var store = transaction.objectStore(objectStoreName); var name = document.getElementById('idxName').value; var keyPath = document.getElementById('idxKeypath'). value; store.createIndex(name, keyPath); } catch (e) { alert(e); } finally { if (db) { db.close(); console.log(' '); } list(); } } } function deleteIDX() { version++; var request = indexedDB.open(requestName, version); request.onupgradeneeded = function (event) { try { db = event.target.result; var transaction = event.target.transaction; var store = transaction.objectStore(objectStoreName); var name = document.getElementById('idxName').value; store.deleteIndex(name); } catch (e) { alert(e.toLocaleString()); } finally { if (db) { db.close(); console.log(' '); } list(); } } }

HTML5 ()

23-41

23

Indexed Database API

createIDX() createIndex() deleteIDX() deleteIndex()

23.8.4 IDBIndex get() IDBRequest get (any key);

key get() key get() JSON Products idx_cat Category {ProductID":"1000001","ProductName":"USB 3.0 ", "Category":" ","UnitPrice":1200} {"ProductID":"1000003","ProductName":"USB 3.0 U3 ", "Category":" ","UnitPrice":1250} {"ProductID":"1000009","ProductName":"Samsung i9100 Galaxy S2 ", "Category":" ","UnitPrice":5520} {"ProductID":"1000025","ProductName":"HTML5 ", "Category":" ","UnitPrice":780}

get()

23-42

HTML5 ()

23.8

23-14

get()

Products index-get.html var requestName = 'KTMS'; var objectStoreName = 'Products'; var version; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; var db; function list() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var idx = store.index('idx_cat'); idx.get(' ').onsuccess = function (event) { var request = event.target; if (request) document.getElementById('message').innerHTML = ' ' + event.target.result.ProductName; }; } catch (e) { alert(e); } finally { if (db) { db.close(); console.log(' !'); } }

()

HTML5 ()

23-43

23

Indexed Database API

} window.onload = function () { var request = indexedDB.open(requestName); request.onsuccess = function (event) { db = event.target.result; list(); }; };

index() idx_cat get() success IDBIndex openCursor() cursor 23-15

cusor index-data-list.html

()

23-44

HTML5 ()

23.8

var requestName = 'KTMS'; var objectStoreName = 'Products'; var version; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; var db; function list() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var idx = store.index('idx_cat'); var crequest = idx.openCursor(); var message = '

• '; crequest.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { message += ( '
• ' + key/value" + '' + cursor.key + "/" + cursor.value.ProductName + ''); cursor.continue(); } else { message += '

' } document.getElementById('message').innerHTML = message; }; } catch (e) { alert(e); } } window.onload = function () { var request = indexedDB.open(requestName); request.onsuccess = function (event) { db = event.target.result; list(); }; };

openCursor() success cursor cursor openCursor() HTML5 ()

23-45

23

Indexed Database API

IDBRequest openCursor ( optional any? range, optional DOMString direction);

range IDBKeyRange range interface IDBKeyRange { readonly attribute any lower; readonly attribute any upper; readonly attribute boolean lowerOpen; readonly attribute boolean upperOpen; static IDBKeyRange only (any value); static IDBKeyRange lowerBound (any lower, optional boolean open); static IDBKeyRange upperBound (any upper, optional boolean open); static IDBKeyRange bound ( any lower, any upper, optional boolean lowerOpen, optional boolean upperOpen); };

only lowerBound upperBound value lower open lower false true upper open upper false true lower upper lowerOpen lower false true upperOpen upper

bound

direction cursor direction next nextunique prev prevunique Cursor next Cursor prev

cursor

23-46

HTML5 ()

23.8

23-16

index-data-only.html var requestName = 'KTMS'; var objectStoreName = 'Products'; var version; var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange var db; function list() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var skey = document.getElementById('key').value; var keyRange = IDBKeyRange.only(skey); var idx = store.index('idx_cat'); var crequest = idx.openCursor(keyRange); var message = '

• '; crequest.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { message += (

  ()

  HTML5 ()

  23-47

  23

  Indexed Database API

  '

• ' + key/value" + '' + cursor.key + "/" + cursor.value.ProductName + ''); cursor.continue(); } else { l message += '

'; document.getElementById('message').innerHTML = message; } }; } catch (e) { alert('error:' + e); } } window.onload = function () { var request = indexedDB.open(requestName); request.onsuccess = function (event) { db = event.target.result; list(); } }; function search() { list(); }

list() IDBKeyRange. only() IDBKeyRange keyRange index() cursor lowerBound upperBound bound bound()

23-48

HTML5 ()

23.8

23-17

23-16 index-data-range.html function list() { try { var transaction = db.transaction([objectStoreName]); var store = transaction.objectStore(objectStoreName); var lower_value = parseInt(document.getElementById('lower').value); var upper_value = parseInt(document.getElementById('upper').value); var keyRange = IDBKeyRange.bound(lower_value, upper_value); var idx = store.index('idx_price'); var crequest = idx.openCursor(keyRange); var message = '

• '; crequest.onsuccess = function (event) { var cursor = event.target.result; if (cursor) { message += ( '
• ' +key/value" + '' + cursor.key + "/" + cursor.value.ProductName + ''); cursor.continue(); } else { message += '

'; document.getElementById('message').innerHTML = message; } }; } catch (e) { alert('error:' + e); } }

HTML5 ()

23-49

23

Indexed Database API

bound() IDBKeyRange UnitPrice index() inx_price

SUMMARY Indexed Databasse API API Indexed Databasse

23-50

HTML5 ()