Advertisement

Web storage

Aug. 30, 2010
Advertisement

More Related Content

Advertisement

Web storage

  1. key/value
  2. transaction() 1 : 2 : 3 :
  3. executeSql() 1 : 2 : 3 :
  4. dev.w3.org/html5/webdatabase This specification has reached an impasse
  5. key/value Indexed Database
  6. Indexed Database API
  7. // 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); } };
  8. // 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; }
  9. 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; }; } };
  10. // 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(); }; };
  11. 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

  1. Session Storage &amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x306F;&amp;#x3001;&amp;#x30BB;&amp;#x30C3;&amp;#x30B7;&amp;#x30E7;&amp;#x30F3;&amp;#x30FB;&amp;#x30B9;&amp;#x30C8;&amp;#x30EC;&amp;#x30FC;&amp;#x30B8;&amp;#x306B;&amp;#x30C7;&amp;#x30FC;&amp;#x30BF;&amp;#x3092;&amp;#x52A0;&amp;#x3048;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x304C;&amp;#x3067;&amp;#x304D;&amp;#x3001;&amp;#x305D;&amp;#x306E;&amp;#x30A6;&amp;#x30A3;&amp;#x30F3;&amp;#x30C9;&amp;#x30A6;&amp;#x3067;&amp;#x958B;&amp;#x304B;&amp;#x308C;&amp;#x3066;&amp;#x3044;&amp;#x308B;&amp;#x540C;&amp;#x3058;&amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x306E;&amp;#x3069;&amp;#x3093;&amp;#x306A;&amp;#x30DA;&amp;#x30FC;&amp;#x30B8;&amp;#x304B;&amp;#x3089;&amp;#x3067;&amp;#x3082;&amp;#x30A2;&amp;#x30AF;&amp;#x30BB;&amp;#x30B9;&amp;#x3059;&amp;#x308B;&amp;#x3053;&amp;#x3068;&amp;#x304C;&amp;#x3067;&amp;#x304D;&amp;#x308B;&amp;#x3088;&amp;#x3046;&amp;#x306B;&amp;#x306A;&amp;#x308A;&amp;#x307E;&amp;#x3059;&amp;#x3002;
Advertisement