Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Storage

Web Storage

Talk given in March 2011

A32ee5b05bff6b42a3dd62b5732065f8?s=128

Sebastiano Armeli-Battana

March 09, 2011
Tweet

Transcript

  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. Web Storage • by WHATWG / W3C • HTML5? Actually

    not... • 2 Storage Areas : • localStorage • sessionStorage • globalStorage HTML 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