Your SlideShare is downloading. ×
Web storage
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web storage

1,158

Published on

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

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,158
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide




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

























  • Transcript

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

    ×