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

WordPress admin UI

Before HTML5...

Cookies

Flash Storage

Internet Explorer UserData

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

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/

Application Cache<!doctype html><html manifest="myapp.manifest">

<title>My offline app</title> <link rel="stylesheet" href="myapp.css"> <img src="myapp.png" />

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!

Go Deeper

www.html5rocks.com/features/storage

caniuse.com

Chromium HTML5 google group

#html5 on freenode IRC

?Monday, November 1, 2010

An Overview of HTML5 Storage

page load time

processing sorting

localstorage apilocalstorage

native json localstorage

object store var db

store var store

creationcallbackvar

restoresopening page

Technology

Html5 storage and browser storage

ShareSquare Tear Sheet Overview & HTML5 Web Apps

HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason...

HTML5 Storage

HTML5 -...

NROC math overview html5 update_jan 2017

Overview HTML, HTML5 and Validations

Mark Branom, Continuing Studies. HTML5 overview –...

HTML5 -...

HTML5 Local Storage

OVERVIEW - Scott Logic › ... ›...

Intro to HTML5 Web Storage

HTML5 Storage/Cache

Client-Side Storage in HTML5 -...

HTML5 JavaScript Storage for Structured Data

Arpeggio- Interactive HTML5 Video Player Feature Overview