Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Storage

Digging into web storage API

  • Be the first to comment

Web Storage

  1. 1. Web Storage Sebastiano Armeli-Battana seba.armeli@gmail.com @sebarmeliSunday, 20 February 2011
  2. 2. Remote Data StorageSunday, 20 February 2011
  3. 3. Why Web Storage? • Performance • Speed • Reduced load on the servers • Offline applications • Transaction - HTTP statelessSunday, 20 February 2011
  4. 4. History of Client-side Storage • HTTP Cookie • userData Behaviour in IE 5.5 • Local Shared Objects in Adobe Flash • Google GearsSunday, 20 February 2011
  5. 5. HTML Web Storage • by WHATWG / W3C • HTML5? Actually not... • 2 Storage Areas : • localStorage • sessionStorage • globalStorageSunday, 20 February 2011
  6. 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. 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; // 0Sunday, 20 February 2011
  8. 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; // 0Sunday, 20 February 2011
  9. 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. 10. Storage Event • “storage” event • Triggered when Storage Areas change • Binded on Window • Attributes: • key, • oldValue • newValue • urlSunday, 20 February 2011
  11. 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. 12. JS Utilities • YUI2 Storage • Dojo Storage • PersistJSSunday, 20 February 2011
  13. 13. Advantages (over Cookies) • Saving Bandwith • Size • Sessions not leaking • Network sniffingSunday, 20 February 2011
  14. 14. Limitations • 5 Mb (or 10Mb) • “QUOTA_EXCEEDED_ERR” • “SECURITY_ERR” • Storage per origin • Cross directory attacks -> DO not USE it! • DNS Spoofing -> SSLSunday, 20 February 2011
  15. 15. The future of Web Storage • Store data that rarely change • Mobile Sites • Offline apps • More Storage? Index Database APISunday, 20 February 2011
  16. 16. Thank you.Sunday, 20 February 2011

×