The Hitchhikers Guide to client Side Persistent Storage

10,509 views
10,108 views

Published on

The slides from my JSConf talk in Berlin 2010.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
10,509
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

The Hitchhikers Guide to client Side Persistent Storage

  1. The hitchiker‘s guide to... storage! Jens Arps uxebu
  2. We open the mobile web.
  3. client-side persistent storage?
  4. So why?
  5. Walkthrough
  6. Cookies • Pros: • huh... • Cons: • low size limit • sent w/ every request • no API
  7. userData • Pros: • available in old IEs (5.5 up) • nice API • Cons: • low size, unreliable • IE only http://msdn.microsoft.com/en-us/library/ms531424%28v=VS.85%29.aspx
  8. globalStorage • Pros: • nice API • still in FF • Cons: • FF only
  9. Sqlite • Pros: • broad support • good size • Cons: • no k/v store • no spec
  10. Sqlite • reads fast, writes slow • chrome has a limit on field size (~2.3MB) • no spec on available SQL commands • use variable binding • may fail silently • check for worker support!
  11. Sqlite Size Limits Safari Chrome Opera User confirm if User confirm if requested more than requested more than 5MB, but unlimited. 4MB, but unlimited. 5MB, fails silently if If needed more than If needed more than attempted to store initially requested, initially requested, more. user will be asked user will be asked again. (Stopped again. (Stopped testing at 1.5GB of testing at 1GB of data.) data.)
  12. localStorage • Pros: • broad support (Safari, FF, Opera, IE) • perfect API • Cons: • none
  13. localStorage Size Limits Wait for QUOTA_EXCEEDED_ERROR.
  14. localStorage Size Limits Safari FF IE Opera 5MB 4MB - 2MB 5MB (200MB) unlimited
  15. localStorage The Storage Event Safari 5 Chrome 6 IE 8 **) Firefox 3 Opera 10 key yes yes undefined undefined yes oldValue yes yes undefined undefined yes newValue yes yes undefined undefined yes url yes undefined yes undefined yes storageArea yes yes undefined undefined yes x-window *) *) yes yes yes fires on setItem only on changed values only on changed values only on changed values always only on changed values fires on removeItem only on changed values only on changed values only on changed values only on changed values only on changed values fires on clear only if not empty only if not empty always always only if not empty sth else? nope - uri property nope - domain property nope
  16. IndexedDB • Pros: • can store objects • Cons: • not really there yet
  17. File API • Pros: • we‘ll see • Cons: • we‘ll see
  18. plugin based • Flash • Gears • AIR •…
  19. What engine for my project?
  20. multi-engine 1. localStorage 2. globalStorage 3. Sqlite 4. plugin based 5. userData 6. cookies
  21. Frameworks!
  22. standalone - Lawnchair - persistJS -… part of library - dojox.storage - YUI -…
  23. Mobile!
  24. got WebKit? iOS : Sqlite iOS 3+ : localStorage Android 2+ : localStorage & Sqlite bada: localStorage & Sqlite webOS 1.4.5 : localStorage
  25. Size Limits localStorage: On Android 2.2, iOS 4 and bada limited to 2MB. Sqlite: iOS asks user at 5MB, Android just keeps on storing. On Android 2.1 localStorage seems to be able to store more than 2MB.
  26. got widget NS? widget preference store http://dev.opera.com/articles/view/opera-widgets-preference-store/
  27. got app? - sqlite w/ phonegap @ Android < 2 - cookie size oddities - more options might be available (Gears, FS, Couch, …)
  28. Frameworks?
  29. StorageJS „The missing micro wrapper“ • targeted at embedded devices • uses the EmbedJS approach
  30. Performance
  31. localStorage http://jsperf.com/localstorage-read-write-test
  32. Security
  33. Summary It‘s not as complicated as it sounds. And it‘s getting better.
  34. Thanks! Jens Arps @jensarps http://jensarps.de @uxebu http://uxebu.com

×