Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web storage

1,634 views

Published on

Web storageについて調べてみました

  • Login to see the comments

  • Be the first to like this

Web storage

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

×