Your SlideShare is downloading. ×
  • Like
Intro to HTML5 Web Storage
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro to HTML5 Web Storage

  • 2,628 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,628
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
53
Comments
0
Likes
2

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

Transcript

  • 1. Web Storage Dylan Schiemann (@dylans) SitePen, Inc. HTML5 Code Camp, October, 2010 © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 2. © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 3. Web Storage Timeline Cookies Flash Storage Dojo Offline/Storage, Google Gears localStorage and sessionStorage window[‘name’] hack WebDatabase and IndexedDB © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 4. WebSQL API Currently supported by Safari, Chrome, and Opera. Will not be supported by Mozilla. SQL, query-based transactions Asynchronous interactions Editor’s Draft: http://dev.w3.org/html5/webdatabase/ Will be easy to use for those well-versed in SQL © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 5. WebSQL: Open Connection, Create Table // Connect to the db var db = window.openDatabase("MyDB", "", "My database", 1024); // If the db has not been initialized for this user... if (db.version != "1") { // User's first visit. Initialize database. db.changeVersion(db.version, "1", function(tx) { // Create "users" table tx.executeSql("CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT);"); }, null, function() { // Success! console.log('success!'); }); } else { // DB already created, move on.... } © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 6. WebSQL: Add Records // Connect to the db var db = window.openDatabase("MyDB", "1", "My database", 1024); // Create a transaction db.transaction(function(tx) { // Execute a SQL statement tx.executeSql("INSERT INTO users (name) VALUES (:name);", // sql [{ name: 'Dylan'}], // Object (data) function(tx, results) { // Success! console.log('Added user. ID: ' + results.insertId,results); }, function(tx,e) { // Error! console.log('Error! ',e); } ); }); © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 7. WebSQL: Retrieve Records // Connect to the db var db = window.openDatabase("MyDB", "1", "My database", 1024); // Create a transaction db.readTransaction(function(tx) { // Search for all users tx.executeSql("SELECT * FROM users", [], function(tx, results) { // Get result rows var rows = results.rows; // For each row for(x = 0; x < rows.length; x++) { // Get the user information! var user = rows.item(x); console.log('Found user: ' + user.name); } }); }); © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 8. IndexedDB API Actively developed by Mozilla Initial support will begin with Firefox 4 (4b6 has issues) Currently a working draft with the W3C Not SQL-based; JavaScript object storage with indexes Asynchronous interactions Working Draft: http://www.w3.org/TR/IndexedDB/ Dojo and Persevere implement it © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 9. IndexedDB: Open Connection, Create Table // Attempt to open a database var request = window.indexedDB.open("MyDB","My database"); // DB name, description // Add "success" handling request.onsuccess = function(event) { // Check to see if the database has been created if(event.result.version != "1") { // not created // Create users table (table name, key, autoincrement?) var tableRequest = db.createObjectStore("users","id",true); // Success! tableRequest.onsuccess = function() { // Save as created! db.setVersion("1"); }; } }; // Account for errors request.onerror = function(event) { //handle the error }; © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 10. IndexedDB: Create a Store with Data // Attempt to open a database var request = window.indexedDB.open("MyDB","My database"); // DB name, description // Add "success" handling request.onsuccess = function(event) { // Grab a store var objectStore = event.result.objectStore("users"); // Add a record objectStore.add({ name: "Dylan", role:"CEO" }).onsuccess(function(){ // Success! console.log("Record saved!"); }); // Add another record objectStore.add({ name: "David", role:"Engineer" }).onsuccess(function(){ // Success! console.log("Second record saved!"); }); }; © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 11. IndexedDB: Retrieve All Data // Attempt to open a database var request = window.indexedDB.open("MyDB","My database"); // DB name, description // Add "success" handling request.onsuccess = function(event) { // Open a cursor on the users store cursorRequest = event.result.objectStore("users").openCursor(); // If successful... cursorRequest.onsuccess = function(e) { // Grab the cursor var cursor = e.cursor; // If cursor is null, exit if(!cursor) { return; } // Get reference to the object at the cursor position var record = e.cursor.value; // Log object to the console console.log("User: " + record.name + "; Role: " + record.role); // Continue! cursor.continue(); }; }; © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010