Web storage

1,337 views
1,291 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,337
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide




  • Session Storage
    サイトは、セッション・ストレージにデータを加えることができ、そのウィンドウで開かれている同じサイトのどんなページからでもアクセスすることができるようになります。

























  • 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/

    ×