an overview of html5 storage

HTML5 StoragePaul IrishNov 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

localStoragesessionStorage

Web SQL Database

IndexedDB App Cache


Local Storage

Key/Value pairsHashtableAvoids HTTP overhead of cookies


Local Storage

window.localStorage

persistent

window.sessionStorage

Last as long as browser is openSurvives page reloads and restoresOpening 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


http://example.com:80

http://example.com:80

JSBIN scratchpad


Native JSON

localStorage only stores strings

(so far!)

Everyone that supports localStorage supports native JSON

JSON.stringify( obj );

JSON.parse( somejsonstring );


JSON & localStorageBest 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();

SizeDefault database size 5MBPrompted after that: 5, 10, 50, 100, etc.

VersioningRequired - Exception if doesn't match

Creation CallbackCalled 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 thingsCreate 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/


http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline

http://www.w3.org/TR/DataCache/

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 MANIFESTmyapp.htmlmyapp.jsmyapp.cssmyapp.png


Current SupportLocal Storage

IE 8+, Firefox 3+, Safari 4+, Chrome 3+, Opera 10.5+

Native JSONFirefox 3.5+, IE 8+, Chrome 4+, Safari 4+, Opera 10.5+

Web SQL DatabaseSafari 3.2+, Chrome 3.0+, Opera 10.5+

IndexedDBChrome 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!


Crossbrowser?

Yeah, totes!


http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Go Deeper

www.html5rocks.com/features/storage

caniuse.com

Chromium HTML5 google group

#html5 on freenode IRC


http://www.html5rocks.com/features/storage

http://www.html5rocks.com/features/storage

?Monday, November 1, 2010

an overview of html5 storage

Technology

page load time

processing sorting

localstorage apilocalstorage

native json localstorage

object store var db

store var store

creationcallbackvar

restoresopening page