Web Storage

Sebastiano Armeli-Battana

seba.armeli@gmail.com@sebarmeli

Sunday, 20 February 2011

Remote Data Storage

Sunday, 20 February 2011

Why Web Storage?

• Performance

• Speed

• Reduced load on the servers

• Offline applications

• Transaction - HTTP stateless

Sunday, 20 February 2011

History of Client-side Storage

•HTTP Cookie

• userData Behaviour in IE 5.5

• Local Shared Objects in Adobe Flash

• Google Gears

Sunday, 20 February 2011

Web Storage

• by WHATWG / W3C

• HTML5? Actually not...

• 2 Storage Areas :

• localStorage

• sessionStorage

• globalStorage

HTML

Sunday, 20 February 2011

Storage APIinterface Storage { readonly attribute unsigned long length;

DOMString key(in unsigned long index);

getter any getItem(in DOMString key);

setter creator void setItem(in DOMString key, in any value);

deleter void removeItem(in DOMString key);

void clear();};

Sunday, 20 February 2011

localStorage• localStorage.setItem(“key1”, “value1”);

localStorage.setItem(“key2”, “value2”);

• localStorage.getItem(“key1”); // “value1”

• localStorage.length; //2

• localStorage.removeItem(“key1”);

• localStorage.length; // 1

• localStorage.clear();

• localStorage.length; // 0Sunday, 20 February 2011

sessionStorage• sessionStorage.setItem(“key1”, “value1”);

sessionStorage.setItem(“key2”, “value2”);

• sessionStorage.getItem(“key1”); // “value1”

• sessionStorage.length; //2

• sessionStorage.removeItem(“key1”);

• sessionStorage.length; // 1

• sessionStorage.clear();

• localStorage.length; // 0Sunday, 20 February 2011

Storing Objects

• Key/value pairs

• Value is a STRING!

• Stringify / Parse JS Objects

• JSON.stringify(myObject);

• JSON.parse(myString);

Sunday, 20 February 2011

Storage Event

• “storage” event

• Triggered when Storage Areas change

• Binded on Window

• Attributes:

• key,

• oldValue

• newValue

• url

Sunday, 20 February 2011

Support

• IE 8+

• FF 3.5+

• Safari 4+

• Chrome 7+

• Opera 10.6+

• iOS Safari 4.0+ / Android 2.2+

Sunday, 20 February 2011

JS Utilities

• YUI2 Storage

• Dojo Storage

• PersistJS

Sunday, 20 February 2011

Advantages (over Cookies)

• Saving Bandwith

• Size

• Sessions not leaking

• Network sniffing

Sunday, 20 February 2011

Limitations

• 5 Mb (or 10Mb)

• “QUOTA_EXCEEDED_ERR”

• “SECURITY_ERR”

• Storage per origin

• Cross directory attacks -> DO not USE it!

• DNS Spoofing -> SSL

Sunday, 20 February 2011

The future of Web Storage

• Store data that rarely change

• Mobile Sites

• Offline apps

• More Storage? Index Database API

Sunday, 20 February 2011

Thank you.

Sunday, 20 February 2011