Intro to HTML5 Web Storage

  • 2,605 views
Uploaded on

 

More 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,605
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
52
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