Client side storage on the                     modern webRajasekharan Vengalil     bit.ly/avranjuDeveloper Evangelist     ...
Agenda•   Why should you care?   • Security Concerns•   Cookies                • Summary•   DOM Storage            • Quest...
Why should you care?• Enabling disconnected user experiences  – Intermittent/no connectivity  – Data caching – shopping ca...
COOKIES
Cookies• Works pretty much  everywhere• Storage size limitations• Transmitted with every  request• Poor programming model
DOM STORAGE
DOM Storage•   Simple persistent key/value store•   Session storage persists for the session•   Local storage persists acr...
DOM STORAGEDEMO
INDEXED DB
Indexed DB defined• Persistent data store in the browser• Scoped by “origin”• Each database is versioned                  ...
Indexed DB - Concepts• Object Store  – Like tables but only key/value  – Object store can have 1 or more indexes  – Keys c...
Indexed DB – More concepts• Requests  – All read/write operations are executed using a    Request• Programming model  – Sy...
DEMOSAVE THE DOODLES
What about compatibility?• Look up polyfills for DOM Storage and Indexed  DB here:       bit.ly/polyfills• Amplify.js – ab...
Security concerns• DOM Storage and Indexed DB – scoped by  origin  – Think about cross-directory attacks -    *.example.co...
Summary• We reviewed  – Options for client side storage today  – DOM Storage  – Indexed DB  – Security concerns to think a...
Resources• IE 10 Dev Guide         • My blog   – bit.ly/HZUqm5           – bit.ly/avranju• MDN Documentation       • Twitt...
QUESTIONS?
Upcoming SlideShare
Loading in …5
×

Client side storage on the modern web

723 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
723
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Client side storage on the modern web

  1. 1. Client side storage on the modern webRajasekharan Vengalil bit.ly/avranjuDeveloper Evangelist @avranjuMicrosoft
  2. 2. Agenda• Why should you care? • Security Concerns• Cookies • Summary• DOM Storage • Questions• Indexed DB• Compatibility concerns
  3. 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. 4. COOKIES
  5. 5. Cookies• Works pretty much everywhere• Storage size limitations• Transmitted with every request• Poor programming model
  6. 6. DOM STORAGE
  7. 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. 8. DOM STORAGEDEMO
  9. 9. INDEXED DB
  10. 10. Indexed DB defined• Persistent data store in the browser• Scoped by “origin”• Each database is versioned example.com Store1 Store2
  11. 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. 12. Indexed DB – More concepts• Requests – All read/write operations are executed using a Request• Programming model – Synchronous – Asynchronous
  13. 13. DEMOSAVE THE DOODLES
  14. 14. What about compatibility?• Look up polyfills for DOM Storage and Indexed DB here: bit.ly/polyfills• Amplify.js – abstracts client side storage
  15. 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. 16. Summary• We reviewed – Options for client side storage today – DOM Storage – Indexed DB – Security concerns to think about
  17. 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. 18. QUESTIONS?

×