HTML5 storage and communication - Zohar Arad

Storage and Communication with HTML5Zohar Arad. March 2011

[email protected] | www.zohararad.com

1Saturday, March 26, 2011

mailto:[email protected]

mailto:[email protected]

http://www.zohararad.com

http://www.zohararad.com

We’re going to talk about

Cross-Origin Resource Sharing

Cross-Window message passing

Persistent data storage with localStorage

Persistent data storage with SQLite


Cross-Origin Resource SharingThe evolution of XHR


In the good ol’ days...

We had XHR (Thank you Microsoft)

We could make requests from the client to the server without page reload

We were restricted to the same-origin security policy - No cross-domain requests


This led to things like

JSONP

Flash-driven requests

Server-side proxy

Using iframes (express your frustration here)


Thankfully,these days are (nearly) gone


Say Hello to CORS


CORS is the new AJAX

Cross-domain requests are allowed

Server is responsible for defining the security policy

Client is responsible for enforcing the security policy

Works over standard HTTP


CORS - Client Side

var xhr = new XMLHttpRequest();

xhr.open(‘get’, ‘http://www.somesite.com/some_resource/’, true);

xhr.onload = function(){ //instead of onreadystatechange

//do something

};

xhr.send(null);


http://www.nczonline.net/some_resource/


Someone has to be different


CORS - Client Side (IE)

var xhr = new XDomainRequest();

xhr.open(‘get’, ‘http://www.somesite.com/some_resource/’);

xhr.onload = function(){ //instead of onreadystatechange

//do something

};

xhr.send();




CORS - Client Side API

abort() - Stop request that’s already in progress

onerror - Handle request errors

onload - Handle request success

send() - Send the request

responseText - Get response content


CORS - Access Control Flow

The client sends ‘Access-Control’ headers to the server during request preflight

The server checks whether the requested resource is allowed

The client checks the preflight response and decides whether to allow the request or not


CORS - Server Side

Use Access-Control headers to allow

Origin - Specific request URI

Method - Request method(s)

Headers - Optional custom headers

Credentials - Request credentials (cookies, SSL, HTTP authentication (not supported in IE)


CORS - Server SideAccess-Control-Allow-Origin: http://www.somesite.com/some_resource

Access-Control-Allow-Methods: POST, GET

Access-Control-Allow-Headers: NCZ

Access-Control-Max-Age: 84600

Access-Control-Allow-Credentials: true


http://www.nczonline.net

http://www.nczonline.net

CORS - Recap

Client sends a CORS request to the server

Server checks request headers for access control according to URI, method, headers and credentials

Server responds to client with an access control response

Client decides whether to send the request or not


CORS - Why should you use it?

It works on all modern browser (except IE7 and Opera)

It doesn’t require a lot of custom modifications to your code

Its the new AJAX (just like the new Spock)

You can fall back to JSONP or Flash

Using CORS will help promote it

Works on Mobile browsers (WebKit)


Cross-Window MessagingLook Ma, no hacks


Posting messages between windows

We have two windows under our control

They don’t necessarily reside under the same domain

How can we pass messages from one window to the other?


We used to hack it away

Change location.hash

Change document.domain (if subdomain is different)

Use opener reference for popups

Throw something really heavy, really hard


No more evil hackspostMessage brings balance to the force


Message passing

Evented

Sender / Receiver model

Receiver is responsible for enforcing security


postMessage - Receiver

window.addEventListener(“message”,onMessage,false);

function onMessage(e){if(e.origin === ‘http://www.mydomain.com’){ console.log(‘Got a message’,e.data);}

}


http://www.mydomain.com


postMessage - Sender

top.postMessage(‘Hi from iframe’, ‘http://www.mydomain.com’);




postMessage - Sending to iframes

var el = document.getElementById(‘my_iframe’);

var win = el.contentWindow;

win.postMessage(‘Hi from iframe parent’, ‘http://www.mydomain.com’);




postMessage - Sending to popup

var popup = window.open(......);

popup.postMessage(‘Hi from iframe parent’, ‘http://www.mydomain.com’);




When should you use it?

Browser extensions

Embedded iframes (if you must use such evil)

Flash to Javascript


Local Persistent StorageGoodbye Cookies


Local Storage

Persistent key / value data store

Domain-specific

Limited to 5MB per domain

Not part of request

Completely cross-platform (yes, even IE7)


localStorage - Basics

var s = window.localStorage;

s[‘somekey’] = ‘Some Value’;

console.log(s[‘somekey’];


localStorage - API

getItem( key ) - get an item from data store

setItem( key, value ) - save item to data store

removeItem( key ) - remove item from data store

clear() - remove all items from data store


localStorage - API

Or you can use Javascript array notation:

var s = window.localStorage;s.myItem = “My Value”;

delete s.myItem;


localStorage - Internet Explorer 7

var storage = document.createElement(‘var’);storage.style.behaviour = “url(‘#default#userData’)”;

var b = document.getElementsByTagName(‘body’)[0];b.appendChild(storage);



//setting a valuevar now = new Date();now.setYear(now.getYear() + 1);var expires = now.toUTCString();

storage.setAttribute(“name”,”zohar”);storage.expires = expires;storage.save(“my_data_store”);



//getting a value

storage.load(“my_data_store”);var v = storage.getAttribute(“name”);

//removing a valuestorage.removeAttribute(“name”);storage.save(“my_data_store”);



See http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx for a complete API reference

IE7 localStorage (data persistence) is limited to 128KB


http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx




Web Storage with SQLiteTransactional offline data store


Web Storage

Transactional

Data-type aware

Supports complex data structures

No size limit

Works on WebKit, Opera (SQLite) and Firefox 4 (IndexedDB)


Web Storage - Why should you use it?

Browser-specific solutions (like extensions / apps)

Mobile browsers ?

Optimized data caching for offline access (did anyone say mobile?)

Transactional operations


Web Storage - WebKit Example

//create a DB and connect

var name = “app_db”;var desc = “My Application DB”;var ver = “1.0”;var size = 10 * 1024 * 1024; // 10MBvar db = openDatabase(name,ver,desc,size);



// create a table

db.transaction(function (tx) { tx.executeSql(‘CREATE TABLE foo (id unique, text)’);});



// insert some data

db.transaction(function (tx) { tx.executeSql(‘insert into foo (text) values ( ? )’,[“Hi There”]);});



// read some data

db.transaction(function (tx) { tx.executeSql(‘select * from foo where id > ?’, [10], function(tx,results){

var data = {};for (var i = 0; i < results.rows.length; i++) { var row = results.rows.item(i); data[row.id] = row.text;}someCallback(data);

});});



// handle errors

db.transaction(function (tx) { tx.executeSql(‘select * from foo where id > ?’, [10], function(tx,results){ //... handle success },

function(tx, errors){ //handle errors } );});


Resources

IndexedDB

http://www.html5rocks.com/tutorials/indexeddb/todo/

https://developer.mozilla.org/en/IndexedDB/IndexedDB_primer

Web SQL - http://www.html5rocks.com/tutorials/offline/storage/

CORS - http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

Local Storage - http://html5tutorial.net/tutorials/working-with-html5-localstorage.html






http://www.html5rocks.com/tutorials/offline/storage/

http://www.html5rocks.com/tutorials/offline/storage/

http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/




http://html5tutorial.net/tutorials/working-with-html5-localstorage.html




Demo & Questions

Download demo from http://zohararad.com/sandbox/cors.zip

gem install padrino

padrino start


http://zohararad.com/sandbox/cors.zip




Documents

HTML5 storage and communication - Zohar Arad