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

8. DOM STORAGE
DEMO

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

13. DEMO
SAVE THE DOODLES

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?