![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](https://image.slidesharecdn.com/html5codecampwebstorage-101017041109-phpapp01/85/Intro-to-HTML5-Web-Storage-3-320.jpg)
![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](https://image.slidesharecdn.com/html5codecampwebstorage-101017041109-phpapp01/85/Intro-to-HTML5-Web-Storage-6-320.jpg)
![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](https://image.slidesharecdn.com/html5codecampwebstorage-101017041109-phpapp01/85/Intro-to-HTML5-Web-Storage-7-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Intro to HTML5 Web Storage (20)
Ad
More from dylanks (9)
Ad
Recently uploaded (20)
Intro to HTML5 Web Storage
- 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