An Overview of HTML5 Storage

HTML5 Storage
Paul Irish
Nov 1st, 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

Before HTML5...
Cookies
Flash Storage
Internet Explorer UserData
Gears
Dojo Storage

HTML5 storage options
localStorage
sessionStorage
Web SQL
Database
IndexedDB App Cache

Local Storage
Key/Value pairs
Hashtable
Avoids HTTP overhead of cookies

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

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

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();

localStorage API
Scoped to the origin
http://example.com:80/
/ / /
| | _ port
| _ domain
_ scheme

JSBIN scratchpad

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

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

textshadow presets!

Web SQL Database
SQL database
Basically wrapper around SQLite

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

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

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

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

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);
   }
}
);

But.... Web SQL
Database....
Is kinda dead.

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

Creating an object store
Key path must be the name of an enumerated property
of all objects being stored in the object store
DB versioning up to caller
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
}

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

Finding things
Create indexes
Query using cursors
db.createObjectStore("Friend", "id", true);
db.createIndex("FriendLikes", "Friend", "likes", false);
db.createIndex("FriendName", "Friend", "name", false);
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();
}

deciphering evercookie

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/

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

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+

Detecting Support
if (Modernizr.localstorage) { ... }
if (Modernizr.sessionstorage) { ... }
if (Modernizr.websqldatabase) { ... }

Why again?
Message inbox
Twitter app
Friends/Contact List
Autocomplete++

Crossbrowser?
Yeah, totes!

Go Deeper
www.html5rocks.com/features/storage
caniuse.com
Chromium HTML5 google group
#html5 on freenode IRC

An Overview of HTML5 Storage

More Related Content

What's hot

Viewers also liked

Similar to An Overview of HTML5 Storage

More from Paul Irish

Recently uploaded

An Overview of HTML5 Storage