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

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.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
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
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
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
"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 ...
 
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...
 
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...
 
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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

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