in-browser storage and me
DESCRIPTION
Presented at Code4Lib 2012 on 8 Feb 2012.TRANSCRIPT
![Page 1: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/1.jpg)
In-browser storage and me
Jason CasdenNorth Carolina State University LibrariesCode4Lib 2012
![Page 2: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/2.jpg)
“What we really want is – a lot of storage space – on the client – that persists beyond a page refresh – and isn’t transmitted to the server”
- Mark Pilgrim, Dive Into HTML5
http://diveintohtml5.info/storage.html
![Page 3: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/3.jpg)
Themes
• “A lot of space”– Reasonably large amounts of various types of data– Caching binary content
• Network independence– Performance– Offline use– Security
• Persistence– Data stability– Local customization– Ability to easily resume a session
![Page 4: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/4.jpg)
Potential library uses
![Page 5: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/5.jpg)
Potential library uses
• Staff-facing apps– Barcode scan– Stacks tools–Mobile data collection tools
• Caching (geotagged) collections data• Catalog shopping cart
![Page 6: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/6.jpg)
In-browser storage IRL (Suma)
![Page 7: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/7.jpg)
Suma
Replace and dramatically improve the entire workflow for collecting and analyzing
data about the use of physical spaces and
services.
![Page 8: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/8.jpg)
Illustration by Joyce Chapman
![Page 9: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/9.jpg)
![Page 10: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/10.jpg)
What is the data?
![Page 11: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/11.jpg)
Data synchronization
![Page 12: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/12.jpg)
Joyce Chapman, Suma team member.
![Page 13: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/13.jpg)
How many Sumas can I put you down for?
https://github.com/cazzerson/suma
![Page 14: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/14.jpg)
Other attempts
• Cookies• Plugins
– Flash– Silverlight– Java– Google Gears– etc.
• window.name• Browser-specific features
– IE's userData– Mozilla globalStorage– Filesystem features used by TiddlyWiki
![Page 15: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/15.jpg)
Persistence?
![Page 16: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/16.jpg)
“A lot of storage space”
• 5MB is the magic number• Can sometimes be increased• Some differences between browsers
![Page 17: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/17.jpg)
Presentation scope
• No SessionStorage• No in-memory storage• No ApplicationCache
![Page 18: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/18.jpg)
Current options
![Page 19: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/19.jpg)
Web Storage
aka localStorage, DOM Storage
![Page 20: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/20.jpg)
Main features
• W3C Candidate Recommendation (split from HTML5)
• Named key-value store• Widespread browser support• Simple API
http://www.w3.org/TR/webstorage/
![Page 21: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/21.jpg)
Limitations
• Performance can be poor– No indexing– Need to fake relational or object store
features
• Values are strings– JSON.stringify/JSON.parse– Base64 encoding for binary data
• No transactions
![Page 22: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/22.jpg)
Code
![Page 23: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/23.jpg)
Browser support
• Firefox 3.5+• Chrome 4.0+• Safari 4.0+• Opera 10.5+• IE 8.0+• iOS Safari 3.2+• Firefox mobile• Opera Mobile 11.0+• Android Browser 2.1+
![Page 24: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/24.jpg)
Web SQL Database
aka WebDB
![Page 25: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/25.jpg)
Main features
• W3C Working Draft• Basically, it's SQLite• Very solid mobile support• Good performance• Indexing• Transactions• Asynchronous API features
![Page 26: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/26.jpg)
…this is awkward.
http://www.w3.org/TR/webdatabase/
![Page 27: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/27.jpg)
Limitations
• Deprecated• No Mozilla or IE support• Requires SQL/RDBMS experience
![Page 28: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/28.jpg)
Code
http://html5doctor.com/introducing-web-sql-databases/
![Page 29: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/29.jpg)
Browser support
• Chrome 4.0+• Safari 3.1+• Opera 10.5+• iOS Safari 3.2+• Opera Mobile 11.0+• Android Browser 2.1+
![Page 30: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/30.jpg)
Indexed Database API
aka IndexedDB, WebSimpleDB
![Page 31: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/31.jpg)
Main features
• W3C Working Draft• Object store (NoSQL)• Flexible data schema• Transactions• Indexed fields• Asynchronous API
http://www.w3.org/TR/IndexedDB/
![Page 32: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/32.jpg)
Limitations
• Limited browser support• Young, changing spec [see:
setVersion()]• Somewhat complex API
![Page 33: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/33.jpg)
Code
http://nparashuram.com/trialtool/index.html#example=/IndexedDB/trialtool/moz_indexedDB.html
![Page 34: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/34.jpg)
Browser support
• Firefox 4.0+• Chrome 11.0+• Firefox Mobile 6.0+• IE 10.0+ (forthcoming)
![Page 35: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/35.jpg)
File API: Writer
![Page 36: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/36.jpg)
Main features
• W3C Working Draft• Sandboxed filesystem• Great for fairly large data storage• Binary data management• Asynchronous API
http://www.w3.org/TR/file-writer-api/
![Page 37: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/37.jpg)
Limitations
• Very limited browser support• No indexing• Spec still being sorted out (see: “File
API: Directories and System”)
![Page 38: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/38.jpg)
Code
http://www.html5rocks.com/en/tutorials/file/filesystem/
![Page 39: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/39.jpg)
Browser support
• Chrome 13.0+ (partial support from 8.0)
![Page 40: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/40.jpg)
What to do NOW?
![Page 41: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/41.jpg)
Web (DOM) Storage
Pretty much universally supported.
![Page 42: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/42.jpg)
Web SQL DB
Do you need to support all browsers?
![Page 43: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/43.jpg)
IndexedDB API
The future?
![Page 44: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/44.jpg)
Libraries
The solution to the browser problem?
![Page 45: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/45.jpg)
• lawnchair
![Page 46: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/46.jpg)
lawnchair
• Collection of objects• Adapters for:– Web Storage– IndexedDB– Web SQL Database– window.name– Google Gears– IE userData– BlackBerry persistent store– In-memory store
![Page 47: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/47.jpg)
lawnchair
http://westcoastlogic.com/lawnchair/saving/
![Page 48: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/48.jpg)
• lawnchair• persistence.js
![Page 49: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/49.jpg)
persistence.js
• Asynchronous JavaScript object-relational mapper
• Adapters for:– Web SQL Database– Google Gears– In-memory storage with explicit Web
Storage commit/read– Server-side support for node.js and MySQL– “Experimental support for QT 4.7
Declarative UI framework (QML)”
![Page 50: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/50.jpg)
persistence.js
https://github.com/zefhemel/persistencejs
![Page 51: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/51.jpg)
• lawnchair• persistence.js• persistJS
![Page 52: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/52.jpg)
• lawnchair• persistence.js• persistJS• amplify.store
![Page 53: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/53.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB
![Page 54: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/54.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
![Page 55: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/55.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage
![Page 56: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/56.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline
![Page 57: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/57.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage
![Page 58: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/58.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL
![Page 59: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/59.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel
![Page 60: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/60.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord
![Page 61: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/61.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord
![Page 62: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/62.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager
![Page 63: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/63.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar
![Page 64: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/64.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache
![Page 65: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/65.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy
![Page 66: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/66.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy• Artemia
![Page 67: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/67.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy• Artemia• microcache.js
![Page 68: In-browser storage and me](https://reader033.vdocument.in/reader033/viewer/2022061218/54b69c134a795968278b46e4/html5/thumbnails/68.jpg)
• lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJS ActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy• Artemia• microcache.js• Store.js