An Overview of HTML5 Storage

HTML5 Storage Paul Irish Nov 1st, 2010 Monday, November 1, 2010

Monday, November 1, 2010

Why use local storage? Decrease page load time Reduce # of HTTP requests WordPress admin UI Put processing (sorting, filtering, etc.) on client MySpace Inbox Searching Monday, November 1, 2010

Before HTML5... Cookies Flash Storage Internet Explorer UserData Gears Dojo Storage Monday, November 1, 2010

HTML5 storage options localStorage Web SQL sessionStorage Database IndexedDB App Cache Monday, November 1, 2010

Local Storage Key/Value pairs Hashtable Avoids HTTP overhead of cookies Monday, November 1, 2010

Local Storage window.localStorage persistent window.sessionStorage Last as long as browser is open Survives page reloads and restores Opening page in new window or tab starts new session Monday, November 1, 2010

localStorage API localStorage.setItem(‘someKey’, someValue); localStorage.getItem(‘someKey’); // value Can also use it directly, but not recommended localStorage.someKey = someValue; Monday, November 1, 2010

localStorage API localStorage.setItem(‘foo’,‘omg!’); localStorage.getItem(‘foo’); // ‘omg!’ localStorage.length // num of items stored localStorage.key(0); // ‘foo’ localStorage.removeItem(‘foo’); localStorage.clear(); Monday, November 1, 2010

localStorage API Scoped to the origin http://example.com:80/ / / / | | _ port | _ domain _ scheme Monday, November 1, 2010

JSBIN scratchpad Monday, November 1, 2010

Native JSON localStorage only stores strings (so far!) Everyone that supports localStorage supports native JSON JSON.stringify( obj ); JSON.parse( somejsonstring ); Monday, November 1, 2010

JSON & localStorage Best Friends. Setting... localStorage.setItem(‘bestobj’, JSON.stringify(obj)); Getting... var obj = JSON.parse( localStorage.getItem(‘bestobj’)); Monday, November 1, 2010

textshadow presets! Monday, November 1, 2010

Web SQL Database SQL database Basically wrapper around SQLite Monday, November 1, 2010

openDatabase(); openDatabase(dbName, version, description, estimatedSize, creationCallback) var db = openDatabase('test', '1.0', 'test database', 2 * 1024 * 1024, myCallback); Monday, November 1, 2010

openDatabase(); Size Default database size 5MB Prompted after that: 5, 10, 50, 100, etc. Versioning Required - Exception if doesn't match Creation Callback Called if database is brand new Returns null if not successful Monday, November 1, 2010

Transactions db.transaction(function(tx){}); db.readTransaction(function(tx){}); Both can optionally take an error and success callback Monday, November 1, 2010

executeSql(); tx.executeSql('CREATE TABLE IF NOT EXISTS test (id unique, text)'); tx.executeSql('INSERT INTO test (id, text) VALUES (?, ?)', [someId, someText]); Monday, November 1, 2010

executeSql(); tx.executeSql('SELECT * FROM test', [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { console.log(results.rows.item(i).text); } } ); Monday, November 1, 2010

But.... Web SQL Database.... Is kinda dead. Monday, November 1, 2010

IndexedDB Object based data store Locate records by key or index Asynchronous & Synchronous API For the browser and for web workers Monday, November 1, 2010

Creating an object store var db = window.indexedDB.open("FriendDB", "My Friends!"); if (db.version != "1") { // User's first visit, initialize database. db.createObjectStore("Friends", // Name "id", // Key Path true); // Auto Increment db.setVersion("1"); } else { // DB already initialized } Key path must be the name of an enumerated property of all objects being stored in the object store DB versioning up to caller Monday, November 1, 2010

Stocking the store var store = db.openObjectStore("Friends"); var brad = store.put({name: "Brad", gender: "male", likes: "yoga"}); console.log(brad.id); // 1 Auto-increment keys get assigned automatically Schema flexible, store anything Monday, November 1, 2010

Finding things Create indexes db.createObjectStore("Friend", "id", true); db.createIndex("FriendLikes", "Friend", "likes", false); db.createIndex("FriendName", "Friend", "name", false); Query using cursors var index = db.openIndex("FriendLikes"); var range = new KeyRange.bound("B", "C"); var cursor = index.openObjectCursor(range); var moreFriends = true; while (moreFriends) { alert(cursor.value.name); moreFriends = cursor.continue(); } Monday, November 1, 2010

deciphering evercookie Monday, November 1, 2010

Application Cache A big offline bucket Pretty good mobile support Declarative API: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline Programmable API: http://www.w3.org/TR/DataCache/ Monday, November 1, 2010

Application Cache <!doctype html> <html manifest="myapp.manifest"> <title>My offline app</title> <link rel="stylesheet" href="myapp.css"> <img src="myapp.png" /> <script src="myapp.js"></script> </html> CACHE MANIFEST myapp.html myapp.js myapp.css myapp.png Monday, November 1, 2010

Current Support Local Storage IE 8+, Firefox 3+, Safari 4+, Chrome 3+, Opera 10.5+ Native JSON Firefox 3.5+, IE 8+, Chrome 4+, Safari 4+, Opera 10.5+ Web SQL Database Safari 3.2+, Chrome 3.0+, Opera 10.5+ IndexedDB Chrome 8, Firefox 4.0 Application Cache (Manifest) Firefox 3.5+, Chrome 4+, Safari 4+ Monday, November 1, 2010

Detecting Support if (Modernizr.localstorage) { ... } if (Modernizr.sessionstorage) { ... } if (Modernizr.websqldatabase) { ... } Monday, November 1, 2010

Why again? Message inbox Twitter app Friends/Contact List Autocomplete++ Monday, November 1, 2010

Crossbrowser? Yeah, totes! Monday, November 1, 2010

Go Deeper www.html5rocks.com/features/storage caniuse.com Chromium HTML5 google group #html5 on freenode IRC Monday, November 1, 2010

Monday, November 1, 2010 ?

An Overview of HTML5 Storage

by Paul Irish on Nov 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 15

Statistics

An Overview of HTML5 Storage — Presentation Transcript