HTML5 Indexed Database API

23
Indexed Database API
23.1 Indexed Database

Web SQL Database
23.7
23.8
23.2
IDBFactory
23.3
23.4
IDBDatabase
23.5
23.8.1
23.8.2
23.8.3
23.8.4
SUMMARY
23.5.1
23.5.2
23.5.3
23.6
23.6.1 IDBObjectStore
23.6.2
23.6.3 cursor
23.6.4
23.6.5
23-2
HTML5 ()
11.1
HTML5HTML5
PART 1
HTML5 ()
23-3
23
Indexed Database HTML5

ndexed Database API
23.1 Indexed Database Web SQL Database

Indexed 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
23-2
HTML5 ()
23.2IDBFactory

SQL cursor SQL
SQL API
23.2 IDBFactory
database Indexed Database API
object store
IDBFactory
HTML5 ()
23-3
23
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 first 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;
attribute Function?
onerror;
};
23-4
result
error
source
transaction
readyState
pending done
onsuccess
success
onerror
error
HTML5 ()
23.3
open
23.3
IDBFactory open()
IDBFactory
Webkit webkitIndexedDB Gecko
mozIndexedDB open()
KTMS
var 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
IDBRequest readyState done

pending
23-1
dbopen.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<script>
var db;
var request = webkitIndexedDB.open('KTMS');
alert(event.target.errorCode);
};
db = event.target.result;
alert(' [readyState' + this.readyState + ']');
};
</script>
</head>
<body >
</body>
</html>
open() KTMS success

db readyState
db
IDBDatabase
23-6
HTML5 ()
23.4 IDBDatabase
23.4 IDBDatabase
IDBDatabase
interface IDBDatabase : EventTarget {
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 ();
attribute Function?
onabort;
attribute Function?
onerror;
attribute Function?
onversionchange;
};
IDBDatabase
name
version
objectStoreNames
DOMStringList
createObjectStore
IDBObjectStore
deleteObjectStore
transaction
close
onabort
abort
onerror
error
onversionchange
versionchange
objectStoreNames DOMStringList
createObjectStore()
HTML5 ()
23-7
23
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
dbVersion-demo.html
<body>
<div id="messagev"></div>
<p>
<input type="text" id='version'
/>
<input type="text" id='dbname' value ="KTMS" />
<button onclick="click_handler()"> </button>
</p>
<div id="message"></div>
</body>
messagev
<input> id version dbname
KTMS
onload
window.onload = function () {
requestName = document.getElementById('dbname').value;
request = indexedDB.open(requestName);
document.getElementById('messagev').innerHTML =
' ' + db.name + ' / ' + db.version;
db.close();
};
};
name
23-10
HTML5 ()
23.5
version
function click_handler() {
var version = parseInt(document.getElementById('version').value);
request = indexedDB.open(requestName, version);
document.getElementById('message').innerHTML =
' ' + event.target.errorCode;
};
(' /' + 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
readonly attribute DOMStringList objectStoreNames;
DOMStringList
23-3
KTMS
KTMS
objectStore-list.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var reuestName = 'KTMS';
var version;
var indexedDB = window.indexedDB ||
window.webkitIndexedDB;
function listObjectSore() {
var request = indexedDB.open(reuestName);
var stores = db.objectStoreNames;
var length = db.objectStoreNames.length;
var storenames = '';
for (var i = 0; i < length; i++) {
()
23-12
HTML5 ()
23.5
storenames += '<li>' + stores[i] + '</li>';

}
version = db.version;
'<p> / ' + db.name + '/' +
db.version + '</p>' +
'<ul>' + storenames + '</ul>';
db.close();
};
}
listObjectSore();
};
</script>
</head>
<body>
</body>
</html>
KTMS db objectStoreNames
for <ul>
23.5.3
IDBDatabase
createObjectStore
IDBObjectStore createObjectStore (
DOMString name,
optional IDBObjectStoreParameters optionalParameters);
name optionalParameters
DOMException
InvalidStateError
versionchange
ConstraintError
InvalidAccessError
autoIncrement ture keyPath
HTML5 ()
23-13
23
InvalidStateError createObjectStore()
upgradeneeded
ConstraintError name
InvalidAccessError
createObjectStore() IDBObjectStore
deleteObjectStore()
Void deleteObjectStore (DOMString name);
name
InvalidStateError
versionchange
NotFoundError
NotFoundError
InvalidStateError createObjectStore()
createObjectStore() deleteObjectStore()
23-14
HTML5 ()
23.5
23-4
23-3
objectStore-demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
var requestName = 'KTMS';
var version;
function addOS() {
version++;
var db;
var request = indexedDB.open(requestName, version);
try{
var osname = document.getElementById('osname').value;
()
HTML5 ()
23-15
23
var objectStore = db.createObjectStore(osname);

alert(' !');
} catch (e) {
alert(e.toLocaleString());
} finally {
db.close();
listObjectSore();
}
}
}
function deleteOS() {
version++;
var db;
try {
var osname = document.getElementById('osname').value;
db.deleteObjectStore(osname);
alert(' !');
} catch (e) {
} finally {
db.close();
listObjectSore();
}
}
}
function listObjectSore() {
//
}
listObjectSore();
};
</script>
</head>
<body>
<p>
<input type="text" id='osname' />
<button onclick="addOS()"> </button>
<button onclick="deleteOS()"> </button>
</p>
</body>
</html>
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 {
name;
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);
};
name
HTML5 ()
23-17
23
null
keyPath key key path
indexNames
transaction
autoIncremenent
put()
value
add()
delete()
get()
clear()
createIndex()
index()
deleteIndex()
openCursor()
IDBCursorWithValue cursor
count()
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
transaction() IDBDatabase Close()
NotFoundError
TypeError
mode
InvalidAccessError
CRUD
IDBTransaction
objectStore()
IDBObjectStore objectStore (in DOMString name)
name
name NotFoundError
objectStore() IDBObjectStore
HTML5 ()
23-19
23
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;
key;
primaryKey;
IDBRequest update (any value);
void
advance ([EnforceRange] unsigned long count);
void
continue (optional any key);
IDBRequest delete ();
}
key continue()
23-20
HTML5 ()
23.6
openCursor()
IDBRequest
23-5
cursor
objectStore-data-list.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
var objectStoreName = 'OS1';
var db;
function list() {
try {
var crequest = store.openCursor()
var message = '<ul>';
crequest.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
message += (
'<li>' + key/value" + '' +
cursor.key + "/" + cursor.value +
()
HTML5 ()
23-21
23
'</li>');
cursor.continue();
} else {
message += '</ul>'
}
message;
};
} catch (e) {
alert(e);
}
}
list();
};
};
</script>
</head>
<body>
<div id="message" ></div>
</body>
</html>
list() openCursor() cursor success

event cursor key cursor

continue() success
23.6.4
IDBObjectStore add()
IDBRequest add (any value, optional any key);
value
23-22
HTML5 ()
23.6
TransactionInactiveError
ReadOnlyError
DataError
key
InvalidStateError
DataCloneError
try-catch
delete() add()
IDBRequest delete (in any key)
key
key TransactionInactiveError
ReadOnlyError add()
add() delete()
23-6
key/value
HTML5 ()
23-23
23
objectStore-data.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var db;
function delete_click() {
try {
var transaction = db.transaction(
[objectStoreName], 'readwrite');
transaction.oncomplete = function (event) {
alert(' !');
};
transaction.onerror = function (event) {
alert(event);
};
var key = document.getElementById('key').value;
//
var request = store.delete(key);
list();
};
alert(event);
};
} catch (e) {
alert(e);
}
}
function add_click(){
try {
alert(' !');
};
alert(event);
};
//
var value = document.getElementById('value').value;
()
23-24
HTML5 ()
23.6

var request = store.add(value, key);
list();
};
alert(event);
};
} catch (e) {
alert(e);
}
}
list();
};
};
function list() {
//
}
</script>
</head>
<body>
key/value
<input type="text" id='key' />/<input type="text" id='value'
<button onclick="add_click()"> </button>
<button onclick="delete_click()"> </button>
</body>
</html>
/>
add_click() add()
delete_click()
key
readwrite
HTML5 ()
23-25
23
var objectStore = db.createObjectStore(osname, {autoIncrement: true });
createObjectStore() autoIncrement
true
OSAI {autoIncrement:
true }
23-7
bjectStore-data-auto.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var objectStoreName = 'OSAI';
var db;
function add_click(){
try {
()
23-26
HTML5 ()
23.6
var transaction =
db.transaction([objectStoreName],
'readwrite');
//
var value = document.getElementById('value').value;
var request = store.add(value);
list();
};
alert(event);
};
} catch (e) {
alert(e);
}
}
list();
};
};
function list() {
//
}
</script>
</head>
<body>
<input type="text" id='value' />
<button onclick="add_click()"> </button>
</body>
</html>
add()
OSAI
23.7
23.6.5
get()
HTML5 ()
23-27
23
key
DataError
23-8
key
objectStore-data-get.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var db;
};
function search_click() {
try {
var request = store.get(key);
var value = request.result;
'key/value' + key + '/' + value;
};
()
23-28
HTML5 ()
23.7

alert(event);
};
} catch (e) {
alert(e);
}
}
</script>
</head>
<body>
key<input type="text" id='key' />
<button onclick="search_click()"> </button>
<div id="message" style="margin-top:20px;" ></div>
</body>
</html>
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
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
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var objectStoreName = 'Products';
var db;
function list() {
try {
var crequest = store.openCursor()
if (cursor) {
message += ('<li>' + id" + cursor.key +
"<br/> " + cursor.value.ProductName +
"<br/> " + cursor.value.UnitPrice +
"<br/> " + cursor.value.Category);
cursor.continue();
} else {
message += '</ul>'
}
document.getElementById('message').innerHTML = message;
};
} catch (e) {
alert(e);
}
}
list();
};
};
</script>
</head>
<body>
</body>
</html>
cursor
JSON
HTML5 ()
23-31
23
message += ('<li>' + JSON.stringify(cursor.value));
ProductID Products
23-10
objectStore-data-json.html
<!DOCTYPE html>
<html >
<head>
<title></title>
<style>
div {margin:10px;width:400px;text-align:left; }
</style>
<script>
var db;
()
23-32
HTML5 ()
23.7
function add_click() {
try {
alert(' !');
};
alert(event);
};
//
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);
alert(' !');
};
alert(' '+event.message );
};
} catch (e) {
alert(e);
}
}
};
};
</script>
</head>
<body>
<div>
<input type="text" id="ProductID" style="width:100px;"/><br/>
<input type="text" id="ProductName" style="width:260px;" /><br/>
<input type="text" id="Category" style="width:60px;" /><br/>
<input type="text" id="UnitPrice" style="width:50px;" /><br/>
</div>
<div><button onclick="add_click()"> </button></div>
</body>
</html>
HTML5 ()
23-33
23
add_Clilck() add()
JSON data
JSON
23.8
23.8.1
IDBIndex
interface IDBIndex {
name;
readonly attribute IDBObjectStore objectStore;
keyPath;
multiEntry;
unique;
IDBRequest openCursor (optional any? range,
IDBRequest openKeyCursor (optional any?range,
IDBRequest getKey (any key);
IDBRequest count (optional any key);
};
name
objectStore
()
23-34
HTML5 ()
23.8
keyPath
multiEntry
multiEntry
unique
unique
openCursor
cursor
openKeyCursor
cursor
get
getKey
count
23.8.2
IDBObjectStore indexNames
readonly attribute DOMStringList
indexNames;
DOMStringList
23-11
HTML5 ()
23-35
23
KTMS
index-list.html
<!DOCTYPE html>
<html>
<head>
<meta/>
<title></title>
<script>
var requestName= 'KTMS';
var objectStoreName = 'Products93';
var version;
var db;
var request = indexedDB.open(requestName);
var indexes = store.indexNames
var msg = '<ul>';
var l = indexes.length;
if (l > 0) {
for (var i = 0; i < indexes.length; i++) {
msg +=
('<li>' + indexes[i] + '/' +
store.index(indexes[i]).keyPath + '</li>');
}
msg += '</ul>'
document.getElementById('message').innerHTML = msg;
} else {
console.log(' ! ');
}
db.close();
};
};
</script>
</head>
<body>
</body>
</html>
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
23-12
upgradeneeded
index-createOS.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var objectStoreName = 'OS';
var version;
var db;
function addIDX() {
version++;
try {
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) {
} finally {
if (db) {
db.close();
console.log(' ');
}
()
23-38
HTML5 ()
23.8
}
}
}
db.close();
}
};
</script>
</head>
<body>
<p>
<input type="text" id='idxname' style="width: 100px" />
<input type="text" id='idxkeyPath' style="width: 100px" />
<button onclick="addIDX()" > </button>
</p>
</body>
</html>
createIndex()
OS
void deleteIndex(DOMString indexName);
indexName
indexName
InvalidStateError ConstraintError
HTML5 ()
23-39
23
23-13
index-deom.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var version;
var db;
function list() {
//
}
list();
};
function createIDX() {
version++;
try {
()
23-40
HTML5 ()
23.8
var transaction = event.target.transaction;
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++;
try {
var transaction = event.target.transaction;
var name = document.getElementById('idxName').value;
store.deleteIndex(name);
} catch (e) {
} finally {
if (db) {
db.close();
console.log(' ');
}
list();
}
}
}
</script>
</head>
<body>
<p>
<input type="text" id='idxName' style="width: 100px" />
<input type="text" id='idxKeypath' style="width: 100px" />
<button onclick="createIDX()" > </button>
<button onclick="deleteIDX()"> </button>
</p>
</body>
</html>
HTML5 ()
23-41
23
createIDX()
createIndex()
deleteIDX()
deleteIndex()
23.8.4
IDBIndex get()
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 ",
{"ProductID":"1000009","ProductName":"Samsung i9100 Galaxy S2 ",
{"ProductID":"1000025","ProductName":"HTML5 ",
get()
23-42
HTML5 ()
23.8
23-14
get()
Products
index-get.html
<!DOCTYPE html>
<html>
<head>
<meta/>
<title></title>
<script>
var version;
var db;
function list() {
try {
var idx = store.index('idx_cat');
idx.get(' ').onsuccess = function (event) {
var request = event.target;
if (request)
' ' +
event.target.result.ProductName;
};
} catch (e) {
alert(e);
} finally {
if (db) {
db.close();
console.log(' !');
}
}
()
HTML5 ()
23-43
23
}
list();
};
};
</script>
</head>
<body>
</body>
</html>
index() idx_cat
get() success
IDBIndex openCursor()
cursor
23-15
cusor
index-data-list.html
<!DOCTYPE html>
<html>
<head>
<meta/>
<title></title>
<script>
()
23-44
HTML5 ()
23.8

var version;
var db;
function list() {
try {
var crequest = idx.openCursor();
if (cursor) {
message += (
'<li>' + key/value" + '' +
cursor.key + "/" + cursor.value.ProductName +
'</li>');
cursor.continue();
} else {
message += '</ul>'
}
};
} catch (e) {
alert(e);
}
}
list();
};
};
</script>
</head>
<body>
</body>
</html>
openCursor()
success cursor cursor
openCursor()
HTML5 ()
23-45
23
IDBRequest openCursor (
optional any? range,
range
IDBKeyRange range
interface IDBKeyRange {
lower;
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
value
lowerBound
lower open lower

false true
upperBound
upper open upper

false true
bound
lower upper lowerOpen

lower false true upperOpen
upper
direction cursor
direction
next
Cursor
nextunique
next
prev
Cursor
prevunique
prev
cursor
23-46
HTML5 ()
23.8
23-16
index-data-only.html
<!DOCTYPE html>
<html>
<head>
<meta />
<title></title>
<script>
var version;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange
var db;
function list() {
try {
var skey = document.getElementById('key').value;
var keyRange = IDBKeyRange.only(skey);
var crequest = idx.openCursor(keyRange);
if (cursor) {
message += (
()
HTML5 ()
23-47
23
'<li>' + key/value" + '' +

'</li>');
cursor.continue();
} else
{
l
message += '</ul>';
}
};
} catch (e) {
alert('error:' + e);
}
}
list();
}
};
function search() {
list();
}
</script>
</head>
<body>
<input id="key" value=" " />
<button onclick="search()"> </button>
</body>
</html>
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 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);
if (cursor) {
message += (
'<li>' +key/value" + '' +
'</li>');
cursor.continue();
} else {
message += '</ul>';
}
};
} catch (e) {
alert('error:' + e);
}
}
HTML5 ()
23-49
23
bound() IDBKeyRange
UnitPrice index() inx_price
SUMMARY
Indexed Databasse API
API
Indexed Databasse
23-50
HTML5 ()

HTML5 Indexed Database API

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 Indexed Database API

Uploaded by

Copyright:

Available Formats

23

Indexed Database API

23.1 Indexed Database

Indexed Database API

Indexed Database API

Indexed Database HTML5

23.1 Indexed Database Web SQL Database

W3C Web SQL Database http://www.w3.org/TR/webdatabase/

W3C Web SQL Database

Indexed Database API

Indexed Database API

Indexed Database API

Indexed Database API

request.onerror = function (event) {

onsuccess event.target.result IDBDatabase

Indexed Database API

IDBRequest readyState done

open() KTMS success

Indexed Database API

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

Indexed Database API

Indexed Database API

readonly attribute DOMStringList objectStoreNames;

storenames += '<li>' + stores[i] + '</li>';

autoIncrement ture keyPath

Indexed Database API

Void deleteObjectStore (DOMString name);

Indexed Database API

var objectStore = db.createObjectStore(osname);

Indexed Database API

var transaction = db.transaction([objectStoreName]);

transaction() IDBDatabase Close()

Indexed Database API

interface IDBCursorWithValue : IDBCursor {

Indexed Database API

list() openCursor() cursor success

Indexed Database API

var key = document.getElementById('key').value;

Indexed Database API

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

Indexed Database API

IDBRequest get (any key);

request.onerror = function (event) {

JSON indexed Database API

Indexed Database API

Indexed Database API

message += ('<li>' + JSON.stringify(cursor.value));

Indexed Database API

readonly attribute DOMStringList

Indexed Database API

unique false unique true

Indexed Database API

void deleteIndex(DOMString indexName);

Indexed Database API

Indexed Database API

Indexed Database API

var requestName = 'KTMS';

Indexed Database API

lower open lower

upper open upper

lower upper lowerOpen

Indexed Database API

'<li>' + key/value" + '' +

Indexed Database API