Web Storage
Post on 16-Jan-2015
2025 Views
Preview:
DESCRIPTION
Transcript
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
top related