SlideShare a Scribd company logo
1 of 35
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.microsoft.com/en-us/library/ms531424%28v=VS.85%29.aspx
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 variable binding
• may fail silently
• check for worker support!
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.)
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                  5MB
           (200MB)         unlimited
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
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 & Sqlite
   webOS 1.4.5 : localStorage
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.
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
        (Gears, FS, Couch, …)
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

More Related Content

Similar to The Hitchhikers Guide to client Side Persistent Storage

2011 JavaOne Apache TomEE Java EE 6 Web Profile
2011 JavaOne Apache TomEE Java EE 6 Web Profile2011 JavaOne Apache TomEE Java EE 6 Web Profile
2011 JavaOne Apache TomEE Java EE 6 Web Profile
David Blevins
 
Localstorage > Cookies
Localstorage > CookiesLocalstorage > Cookies
Localstorage > Cookies
Shane Riley
 
How we took our server side application to the cloud and liked what we got
How we took our server side application to the cloud and liked what we gotHow we took our server side application to the cloud and liked what we got
How we took our server side application to the cloud and liked what we got
Baruch Sadogursky
 

Similar to The Hitchhikers Guide to client Side Persistent Storage (20)

Large platform architecture in (mostly) perl
Large platform architecture in (mostly) perlLarge platform architecture in (mostly) perl
Large platform architecture in (mostly) perl
 
2011 JavaOne Apache TomEE Java EE 6 Web Profile
2011 JavaOne Apache TomEE Java EE 6 Web Profile2011 JavaOne Apache TomEE Java EE 6 Web Profile
2011 JavaOne Apache TomEE Java EE 6 Web Profile
 
Java EE 7 Soup to Nuts at JavaOne 2014
Java EE 7 Soup to Nuts at JavaOne 2014Java EE 7 Soup to Nuts at JavaOne 2014
Java EE 7 Soup to Nuts at JavaOne 2014
 
Java tuning on GNU/Linux for busy dev
Java tuning on GNU/Linux for busy devJava tuning on GNU/Linux for busy dev
Java tuning on GNU/Linux for busy dev
 
6 reasons Jubilee could be a Rubyist's new best friend
6 reasons Jubilee could be a Rubyist's new best friend6 reasons Jubilee could be a Rubyist's new best friend
6 reasons Jubilee could be a Rubyist's new best friend
 
Дмитрий Щадей "Что помогает нам писать качественный JavaScript-код?"
Дмитрий Щадей "Что помогает нам писать качественный JavaScript-код?"Дмитрий Щадей "Что помогает нам писать качественный JavaScript-код?"
Дмитрий Щадей "Что помогает нам писать качественный JavaScript-код?"
 
Html5 storage suggestions for challenges.pptx
Html5 storage   suggestions for challenges.pptxHtml5 storage   suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
 
[Start] Playing
[Start] Playing[Start] Playing
[Start] Playing
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
 
Jvm tuning in a rush! - Lviv JUG
Jvm tuning in a rush! - Lviv JUGJvm tuning in a rush! - Lviv JUG
Jvm tuning in a rush! - Lviv JUG
 
Localstorage > Cookies
Localstorage > CookiesLocalstorage > Cookies
Localstorage > Cookies
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Gae開発入門
Gae開発入門Gae開発入門
Gae開発入門
 
Inside Wordnik's Architecture
Inside Wordnik's ArchitectureInside Wordnik's Architecture
Inside Wordnik's Architecture
 
Memory Management: What You Need to Know When Moving to Java 8
Memory Management: What You Need to Know When Moving to Java 8Memory Management: What You Need to Know When Moving to Java 8
Memory Management: What You Need to Know When Moving to Java 8
 
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработкиСергей Батищев: 2D игры на HTML5: мифы и реальность разработки
Сергей Батищев: 2D игры на HTML5: мифы и реальность разработки
 
A Post-Apocalyptic sun.misc.Unsafe World by Christoph engelbert
A Post-Apocalyptic sun.misc.Unsafe World by Christoph engelbertA Post-Apocalyptic sun.misc.Unsafe World by Christoph engelbert
A Post-Apocalyptic sun.misc.Unsafe World by Christoph engelbert
 
BP-8 Global Federation and Search
BP-8 Global Federation and SearchBP-8 Global Federation and Search
BP-8 Global Federation and Search
 
How we took our server side application to the cloud and liked what we got
How we took our server side application to the cloud and liked what we gotHow we took our server side application to the cloud and liked what we got
How we took our server side application to the cloud and liked what we got
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 

The Hitchhikers Guide to client Side Persistent Storage

  • 1. The hitchiker‘s guide to... storage! Jens Arps uxebu
  • 2.
  • 3. We open the mobile web.
  • 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
  • 23. standalone - Lawnchair - persistJS -… part of library - dojox.storage - YUI -…
  • 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, …)
  • 30. StorageJS „The missing micro wrapper“ • targeted at embedded devices • uses the EmbedJS approach
  • 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