Intro to HTML5 Web Storage
Upcoming SlideShare
Loading in...5
×
 

Intro to HTML5 Web Storage

on

  • 3,129 views

 

Statistics

Views

Total Views
3,129
Views on SlideShare
3,072
Embed Views
57

Actions

Likes
2
Downloads
52
Comments
0

2 Embeds 57

https://wiki.cantara.no 52
http://wiki.cantara.no 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro to HTML5 Web Storage Intro to HTML5 Web Storage Presentation Transcript

  • Web Storage Dylan Schiemann (@dylans) SitePen, Inc. HTML5 Code Camp, October, 2010 © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • © SitePen, Inc. All Rights Reserved Sunday, October 17, 2010
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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