The hitchiker‘s guide to...

         storage!

           Jens Arps
             uxebu
We open the mobile web.
client-side
persistent storage?
So why?
Walkthrough
Cookies
• Pros:
 • huh...
• Cons:
 • low size limit
 • sent w/ every request
 • no API
userData
• Pros:
 • available in old IEs (5.5 up)
 • nice API
• Cons:
 • low size, unreliable
 • IE only
      http://msdn...
globalStorage

• Pros:
 • nice API
 • still in FF
• Cons:
 • FF only
Sqlite
• Pros:
  • broad support
  • good size
• Cons:
  • no k/v store
  • no spec
Sqlite
• reads fast, writes slow
• chrome has a limit on field size (~2.3MB)
• no spec on available SQL commands
• use vari...
Sqlite
                          Size Limits


       Safari                Chrome                 Opera

User confirm if  ...
localStorage
• Pros:
  • broad support (Safari, FF, Opera, IE)
  • perfect API
• Cons:
  • none
localStorage
         Size Limits



Wait for QUOTA_EXCEEDED_ERROR.
localStorage
             Size Limits
Safari       FF       IE    Opera




             5MB            4MB -
2MB         ...
localStorage
                                         The Storage Event
                              Safari 5            ...
IndexedDB
• Pros:
 • can store objects
• Cons:
 • not really there yet
File API
• Pros:
 • we‘ll see
• Cons:
 • we‘ll see
plugin based

    • Flash
    • Gears
    • AIR
    •…
What engine for my
     project?
multi-engine
1.    localStorage
2.   globalStorage
3.        Sqlite
4.   plugin based
5.      userData
6.       cookies
Frameworks!
standalone
    - Lawnchair
     - persistJS
        -…


part of library
   - dojox.storage
        - YUI
         -…
Mobile!
got WebKit?
           iOS : Sqlite
      iOS 3+ : localStorage
Android 2+ : localStorage & Sqlite
   bada: localStorage &...
Size Limits
localStorage: On Android 2.2, iOS 4 and bada
limited to 2MB.

Sqlite: iOS asks user at 5MB, Android just
keeps...
got widget NS?
     widget preference store




 http://dev.opera.com/articles/view/opera-widgets-preference-store/
got app?
- sqlite w/ phonegap @ Android < 2
        - cookie size oddities
 - more options might be available
        (Gea...
Frameworks?
StorageJS
 „The missing micro wrapper“


• targeted at embedded devices
• uses the EmbedJS approach
Performance
localStorage




  http://jsperf.com/localstorage-read-write-test
Security
Summary
It‘s not as complicated as it sounds.
       And it‘s getting better.
Thanks!
    Jens Arps

    @jensarps
http://jensarps.de

     @uxebu
http://uxebu.com
The Hitchhikers Guide to client Side Persistent Storage
Upcoming SlideShare
Loading in...5
×

The Hitchhikers Guide to client Side Persistent Storage

9,494

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
9,494
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. 1. The hitchiker‘s guide to... storage! Jens Arps uxebu
  2. 2. We open the mobile web.
  3. 3. client-side persistent storage?
  4. 4. So why?
  5. 5. Walkthrough
  6. 6. Cookies • Pros: • huh... • Cons: • low size limit • sent w/ every request • no API
  7. 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. 8. globalStorage • Pros: • nice API • still in FF • Cons: • FF only
  9. 9. Sqlite • Pros: • broad support • good size • Cons: • no k/v store • no spec
  10. 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. 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. 12. localStorage • Pros: • broad support (Safari, FF, Opera, IE) • perfect API • Cons: • none
  13. 13. localStorage Size Limits Wait for QUOTA_EXCEEDED_ERROR.
  14. 14. localStorage Size Limits Safari FF IE Opera 5MB 4MB - 2MB 5MB (200MB) unlimited
  15. 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. 16. IndexedDB • Pros: • can store objects • Cons: • not really there yet
  17. 17. File API • Pros: • we‘ll see • Cons: • we‘ll see
  18. 18. plugin based • Flash • Gears • AIR •…
  19. 19. What engine for my project?
  20. 20. multi-engine 1. localStorage 2. globalStorage 3. Sqlite 4. plugin based 5. userData 6. cookies
  21. 21. Frameworks!
  22. 22. standalone - Lawnchair - persistJS -… part of library - dojox.storage - YUI -…
  23. 23. Mobile!
  24. 24. got WebKit? iOS : Sqlite iOS 3+ : localStorage Android 2+ : localStorage & Sqlite bada: localStorage & Sqlite webOS 1.4.5 : localStorage
  25. 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. 26. got widget NS? widget preference store http://dev.opera.com/articles/view/opera-widgets-preference-store/
  27. 27. got app? - sqlite w/ phonegap @ Android < 2 - cookie size oddities - more options might be available (Gears, FS, Couch, …)
  28. 28. Frameworks?
  29. 29. StorageJS „The missing micro wrapper“ • targeted at embedded devices • uses the EmbedJS approach
  30. 30. Performance
  31. 31. localStorage http://jsperf.com/localstorage-read-write-test
  32. 32. Security
  33. 33. Summary It‘s not as complicated as it sounds. And it‘s getting better.
  34. 34. Thanks! Jens Arps @jensarps http://jensarps.de @uxebu http://uxebu.com

×