Client side storage on the modern web
- 1. Client side storage on the modern web Rajasekharan Vengalil bit.ly/avranju Developer Evangelist @avranju Microsoft
- 2. Agenda • Why should you care? • Security Concerns • Cookies • Summary • DOM Storage • Questions • Indexed DB • Compatibility concerns
- 3. Why should you care? • Enabling disconnected user experiences – Intermittent/no connectivity – Data caching – shopping carts, user profile • Complements “Offline Web Applications” spec • HTML based metro style apps on Windows 8
- 4. COOKIES
- 5. Cookies • Works pretty much everywhere • Storage size limitations • Transmitted with every request • Poor programming model
- 6. DOM STORAGE
- 7. DOM Storage • Simple persistent key/value store • Session storage persists for the session • Local storage persists across sessions • Scoped by domain • Supported even by IE8 • Can store lots of data – 5 MB on FF and Chrome and 10 MB on IE • But cannot iterate over data
- 9. INDEXED DB
- 10. Indexed DB defined • Persistent data store in the browser • Scoped by “origin” • Each database is versioned example.com Store1 Store2
- 11. Indexed DB - Concepts • Object Store – Like tables but only key/value – Object store can have 1 or more indexes – Keys can be arrays, strings, dates or numbers – Values can be objects also • Transactions – Reads/writes done in transaction scope – Atomic, durable data access and mutation
- 12. Indexed DB – More concepts • Requests – All read/write operations are executed using a Request • Programming model – Synchronous – Asynchronous
- 14. What about compatibility? • Look up polyfills for DOM Storage and Indexed DB here: bit.ly/polyfills • Amplify.js – abstracts client side storage
- 15. Security concerns • DOM Storage and Indexed DB – scoped by origin – Think about cross-directory attacks - *.example.com • Don’t store stuff like credit card numbers • Be careful when you include 3rd party scripts • Be careful when storing personally identifiable information (PII)
- 16. Summary • We reviewed – Options for client side storage today – DOM Storage – Indexed DB – Security concerns to think about
- 17. Resources • IE 10 Dev Guide • My blog – bit.ly/HZUqm5 – bit.ly/avranju • MDN Documentation • Twitter – mzl.la/HZUz8V – @avranju • IE Test Drive Demo • Email – bit.ly/IYidlc – rajave@microsoft.com • Indexed DB W3C Spec – bit.ly/Jf4MC0
- 18. QUESTIONS?