Web storage
Download as KEY, PDF0 likes877 views
The document discusses the Indexed Database API which allows web applications to store and retrieve structured data in a client-side database. It provides examples of how to open a database, define object stores, add and retrieve data from the object stores. The Indexed Database API provides a more powerful alternative to Web Storage for client-side storage of larger amounts of structured data.
![//
var createdObjectStoreCount = 0;
var objectStores = [
{ name: "kids", keyPath: "id", autoIncrement: true },
{ name: "candy", keyPath: "id", autoIncrement: true },
{ name: "candySales", keyPath: "", autoIncrement: true }
];
function objectStoreCreated(event) {
if (++createdObjectStoreCount == objectStores.length) {
db.setVersion("1").onsuccess = function(event) {
loadData(db);
};
}
}
for (var index = 0; index < objectStores.length; index++) {
var params = objectStores[index];
// DB
request = db.createObjectStore(params.name, params.keyPath,
params.autoIncrement);
//
request.onsuccess = objectStoreCreated;
}](https://image.slidesharecdn.com/webstorage-100830075516-phpapp02/85/Web-storage-26-320.jpg)
![var kids = [
{ name: "Anna" },
{ name: "Betty" },
{ name: "Christine" }
];
// DB
var request = window.indexedDB.open(
"CandyDB",
"My candy store database");
request.onsuccess = function(event) {
var objectStore = event.result.objectStore("kids");
for (var index = 0; index < kids.length; index++) {
var kid = kids[index];
//
objectStore.add(kid).onsuccess = function(event) {
document.getElementById("display").textContent =
"Saved record for "+kid.name+" with id "+event.result;
};
}
};](https://image.slidesharecdn.com/webstorage-100830075516-phpapp02/85/Web-storage-27-320.jpg)
Web storage
- 8. key/value
- 15. transaction() 1 : 2 : 3 :
- 17. executeSql() 1 : 2 : 3 :
- 22. dev.w3.org/html5/webdatabase This specification has reached an impasse
- 25. // DB var request = window.indexedDB.open( "CandyDB", "My candy store database"); request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // } else { // loadData(db); } };
- 26. // var createdObjectStoreCount = 0; var objectStores = [ { name: "kids", keyPath: "id", autoIncrement: true }, { name: "candy", keyPath: "id", autoIncrement: true }, { name: "candySales", keyPath: "", autoIncrement: true } ]; function objectStoreCreated(event) { if (++createdObjectStoreCount == objectStores.length) { db.setVersion("1").onsuccess = function(event) { loadData(db); }; } } for (var index = 0; index < objectStores.length; index++) { var params = objectStores[index]; // DB request = db.createObjectStore(params.name, params.keyPath, params.autoIncrement); // request.onsuccess = objectStoreCreated; }
- 27. var kids = [ { name: "Anna" }, { name: "Betty" }, { name: "Christine" } ]; // DB var request = window.indexedDB.open( "CandyDB", "My candy store database"); request.onsuccess = function(event) { var objectStore = event.result.objectStore("kids"); for (var index = 0; index < kids.length; index++) { var kid = kids[index]; // objectStore.add(kid).onsuccess = function(event) { document.getElementById("display").textContent = "Saved record for "+kid.name+" with id "+event.result; }; } };
- 28. // DB var request = window.indexedDB.open( "CandyDB", "My candy store database"); request.onsuccess = function(event) { // request = event.result.objectStore("kids").openCursor(); request.onsuccess = function(event) { var cursor = event.result; // cursor null if (!cursor) { return; } var element = document.createElement("div"); element.textContent = cursor.value.name; document.getElementById("kidList").appendChild(element); cursor.continue(); }; };
- 29. Web Storage http://dev.w3.org/html5/webstorage/Overview.html Web SQL Database http://dev.w3.org/html5/webdatabase/ Indexed Database http://www.w3.org/TR/IndexedDB/ Firefox 4 Indexed Database API https://dev.mozilla.jp/hacksmozillaorg/firefox-4-an-early-walk-through-of- indexeddb/ Simple to-do list with jQuery and local storage. http://www.tuttoaster.com/tag/html5/
Editor's Notes
- #6: Session Storage &#x30B5;&#x30A4;&#x30C8;&#x306F;&#x3001;&#x30BB;&#x30C3;&#x30B7;&#x30E7;&#x30F3;&#x30FB;&#x30B9;&#x30C8;&#x30EC;&#x30FC;&#x30B8;&#x306B;&#x30C7;&#x30FC;&#x30BF;&#x3092;&#x52A0;&#x3048;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x3001;&#x305D;&#x306E;&#x30A6;&#x30A3;&#x30F3;&#x30C9;&#x30A6;&#x3067;&#x958B;&#x304B;&#x308C;&#x3066;&#x3044;&#x308B;&#x540C;&#x3058;&#x30B5;&#x30A4;&#x30C8;&#x306E;&#x3069;&#x3093;&#x306A;&#x30DA;&#x30FC;&#x30B8;&#x304B;&#x3089;&#x3067;&#x3082;&#x30A2;&#x30AF;&#x30BB;&#x30B9;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x308A;&#x307E;&#x3059;&#x3002;