This document summarizes options for client-side persistent storage on mobile web. Local storage using localStorage has broad support and is recommended. Other options like cookies have size limits, and SQLite requires a SQL API. IndexedDB and the File API are not fully supported. Storage needs vary by platform - iOS and Android have different limits. Frameworks can provide a common API across storage mechanisms. Performance of localStorage is fast for reading and writing. Security considerations apply depending on the storage mechanism used. Overall, client-side storage options are improving and localStorage is generally sufficient.

1. The hitchiker‘s guide to...
storage!
Jens Arps
uxebu

3. We open the mobile web.

4. client-side
persistent storage?

5. So why?

6. Walkthrough

7. Cookies
• Pros:
• huh...
• Cons:
• low size limit
• sent w/ every request
• no API

8. 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

9. globalStorage
• Pros:
• nice API
• still in FF
• Cons:
• FF only

10. Sqlite
• Pros:
• broad support
• good size
• Cons:
• no k/v store
• no spec

11. 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!

12. 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.)

13. localStorage
• Pros:
• broad support (Safari, FF, Opera, IE)
• perfect API
• Cons:
• none

14. localStorage
Size Limits
Wait for QUOTA_EXCEEDED_ERROR.

15. localStorage
Size Limits
Safari FF IE Opera
5MB 4MB -
2MB 5MB
(200MB) unlimited

16. 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

17. IndexedDB
• Pros:
• can store objects
• Cons:
• not really there yet

18. File API
• Pros:
• we‘ll see
• Cons:
• we‘ll see

19. plugin based
• Flash
• Gears
• AIR
•…

20. What engine for my
project?

21. multi-engine
1. localStorage
2. globalStorage
3. Sqlite
4. plugin based
5. userData
6. cookies

22. Frameworks!

23. standalone
- Lawnchair
- persistJS
-…
part of library
- dojox.storage
- YUI
-…

24. Mobile!

25. got WebKit?
iOS : Sqlite
iOS 3+ : localStorage
Android 2+ : localStorage & Sqlite
bada: localStorage & Sqlite
webOS 1.4.5 : localStorage

26. 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.

27. got widget NS?
widget preference store
http://dev.opera.com/articles/view/opera-widgets-preference-store/

28. got app?
- sqlite w/ phonegap @ Android < 2
- cookie size oddities
- more options might be available
(Gears, FS, Couch, …)

29. Frameworks?

30. StorageJS
„The missing micro wrapper“
• targeted at embedded devices
• uses the EmbedJS approach

31. Performance

32. localStorage
http://jsperf.com/localstorage-read-write-test

33. Security

34. Summary
It‘s not as complicated as it sounds.
And it‘s getting better.

35. Thanks!
Jens Arps
@jensarps
http://jensarps.de
@uxebu
http://uxebu.com