The Hitchhikers Guide to client Side Persistent Storage

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 ﬁeld 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 conﬁrm if User conﬁrm 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

http://lanyrd.com	5
http://marivineositios.blogspot.com	1
http://127.0.0.1:51235	1
http://a0.twimg.com	1

The Hitchhikers Guide to client Side Persistent Storage

by Jens Arps on Sep 26, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 8

Statistics

The Hitchhikers Guide to client Side Persistent Storage — Presentation Transcript