Digging into web storage API

1. Web Storage
Sebastiano Armeli-Battana
seba.armeli@gmail.com
@sebarmeli
Sunday, 20 February 2011

2. Remote Data Storage
Sunday, 20 February 2011

3. Why Web Storage?
• Performance
• Speed
• Reduced load on the servers
• Offline applications
• Transaction - HTTP stateless
Sunday, 20 February 2011

4. 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

5. HTML
Web Storage
• by WHATWG / W3C
• HTML5? Actually not...
• 2 Storage Areas :
• localStorage
• sessionStorage
• globalStorage
Sunday, 20 February 2011

6. Storage API
interface 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

7. 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; // 0
Sunday, 20 February 2011

8. 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; // 0
Sunday, 20 February 2011

9. Storing Objects
• Key/value pairs
• Value is a STRING!
• Stringify / Parse JS Objects
• JSON.stringify(myObject);
• JSON.parse(myString);
Sunday, 20 February 2011

10. Storage Event
• “storage” event
• Triggered when Storage Areas change
• Binded on Window
• Attributes:
• key,
• oldValue
• newValue
• url
Sunday, 20 February 2011

11. Support
• IE 8+
• FF 3.5+
• Safari 4+
• Chrome 7+
• Opera 10.6+
• iOS Safari 4.0+ / Android 2.2+
Sunday, 20 February 2011

12. JS Utilities
• YUI2 Storage
• Dojo Storage
• PersistJS
Sunday, 20 February 2011

13. Advantages (over Cookies)
• Saving Bandwith
• Size
• Sessions not leaking
• Network sniffing
Sunday, 20 February 2011

14. 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

15. The future of Web Storage
• Store data that rarely change
• Mobile Sites
• Offline apps
• More Storage? Index Database API
Sunday, 20 February 2011

16. Thank you.
Sunday, 20 February 2011