Embed Size (px)
Citation preview
© SitePen, Inc. All Rights Reserved
Web Storage
Dylan Schiemann (@dylans)SitePen, Inc.HTML5 Code Camp, October, 2010
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
Web Storage Timeline
Cookies
Flash Storage
Dojo Offline/Storage, Google Gears
localStorage and sessionStorage
window[‘name’] hack
WebDatabase and IndexedDB
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// Connect to the dbvar 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....}
WebSQL: Open Connection, Create Table
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// Connect to the dbvar db = window.openDatabase("MyDB", "1", "My database", 1024);
// Create a transactiondb.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); } );});
WebSQL: Add Records
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// Connect to the dbvar db = window.openDatabase("MyDB", "1", "My database", 1024);
// Create a transactiondb.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); } });});
WebSQL: Retrieve Records
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
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
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// Attempt to open a databasevar request = window.indexedDB.open("MyDB","My database"); // DB name, description
// Add "success" handlingrequest.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 errorsrequest.onerror = function(event) { //handle the error};
IndexedDB: Open Connection, Create Table
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// Attempt to open a databasevar request = window.indexedDB.open("MyDB","My database"); // DB name, description
// Add "success" handlingrequest.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!"); }); };
IndexedDB: Create a Store with Data
Sunday, October 17, 2010
© SitePen, Inc. All Rights Reserved
// Attempt to open a databasevar request = window.indexedDB.open("MyDB","My database"); // DB name, description
// Add "success" handlingrequest.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(); };};
IndexedDB: Retrieve All Data
Sunday, October 17, 2010
