HTML5 storage and communication - Zohar Arad

Storage and Communication with
HTML5
Zohar Arad. March 2011
zohar@zohararad.com | www.zohararad.com

Saturday, March 26, 2011 1

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 Sharing
The 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 deﬁning 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);


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 preﬂight
The server checks whether the requested resource is
allowed
The client checks the preﬂight response and decides
whether to allow the request or not


CORS - Server Side
Use Access-Control headers to allow
Origin - Speciﬁc request URI
Method - Request method(s)
Headers - Optional custom headers
Credentials - Request credentials (cookies, SSL, HTTP
authentication (not supported in IE)


CORS - Server Side
Access-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


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 modiﬁcations 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 Messaging
Look 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 hacks
postMessage 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);
}
}


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’,


postMessage - Sending to popup
var popup = window.open(......);

popup.postMessage(‘Hi from iframe parent’,


When should you use it?
Browser extensions
Embedded iframes (if you must use such evil)
Flash to Javascript


Local Persistent Storage
Goodbye Cookies


Local Storage

Persistent key / value data store
Domain-speciﬁc
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 value
var 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 value
storage.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


Web Storage with SQLite
Transactional ofﬂine 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-speciﬁc solutions (like extensions / apps)
Mobile browsers ?
Optimized data caching for ofﬂine 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; // 10MB
var db = openDatabase(name,ver,desc,size);


// create a table

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


// insert some data

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


// read some data

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

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/ofﬂine/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


Demo & Questions

Download demo from http://zohararad.com/sandbox/
cors.zip
gem install padrino
padrino start


HTML5 storage and communication - Zohar Arad

Recomendados

Recomendados

Más contenido relacionado

Similar a HTML5 storage and communication - Zohar Arad

Similar a HTML5 storage and communication - Zohar Arad (16)

Más de Israeli Internet Association technology committee

Más de Israeli Internet Association technology committee (20)

HTML5 storage and communication - Zohar Arad