Jason Casden North Carolina State University Libraries Code4Lib 2012 What we really want is a lot of storage space on the client that persists beyond a page refresh and isnt transmitted to the server ID: 313124
Download Presentation The PPT/PDF document "In-browser storage and me" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
In-browser storage and me
Jason CasdenNorth Carolina State University LibrariesCode4Lib 2012Slide2
“
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.htmlSlide3
Themes
“A lot of space”Reasonably large amounts of various types of dataCaching binary contentNetwork independencePerformance
Offline
use
Security
Persistence
Data stability
Local customization
Ability to easily resume a sessionSlide4
Potential library usesSlide5
Potential library uses
Staff-facing appsBarcode scanStacks toolsMobile data collection toolsCaching (geotagged
) collections data
Catalog
shopping cartSlide6
In-browser storage IRL (Suma)Slide7
Suma
Replace and dramatically improve the entire workflow for collecting and analyzing data about the use of physical spaces and services.Slide8
Illustration by Joyce ChapmanSlide9Slide10
What is the data?Slide11
Data synchronizationSlide12
Joyce Chapman, Suma team member.Slide13
How many Sumas can I put you down for?
https://github.com/cazzerson/sumaSlide14
Other attempts
CookiesPluginsFlashSilverlightJava
Google Gears
etc.
window.nameBrowser-specific features
IE's
userData
Mozilla
globalStorage
Filesystem
features used by
TiddlyWikiSlide15
Persistence?Slide16
“A lot of storage space”
5MB is the magic numberCan sometimes be increasedSome differences between browsersSlide17
Presentation scope
No SessionStorageNo in-memory storageNo ApplicationCacheSlide18
Current optionsSlide19
Web Storage
aka localStorage, DOM StorageSlide20
Main features
W3C Candidate Recommendation (split from HTML5)Named key-value storeWidespread browser supportSimple API
http://www.w3.org/TR/webstorage/Slide21
Limitations
Performance can be poorNo indexingNeed to fake relational or object store featuresValues are stringsJSON.stringify/JSON.parse
Base64 encoding for binary data
No transactionsSlide22
CodeSlide23
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+Slide24
Web SQL Database
aka WebDBSlide25
Main features
W3C Working DraftBasically, it's SQLiteVery solid mobile supportGood performanceIndexingTransactions
Asynchronous API featuresSlide26
…this is awkward.
http://www.w3.org/TR/webdatabase/Slide27
Limitations
DeprecatedNo Mozilla or IE supportRequires SQL/RDBMS experienceSlide28
Code
http://html5doctor.com/introducing-web-sql-databases/Slide29
Browser support
Chrome 4.0+Safari 3.1+Opera 10.5+iOS Safari 3.2+Opera Mobile 11.0+
Android Browser 2.1+Slide30
Indexed Database API
aka IndexedDB, WebSimpleDBSlide31
Main features
W3C Working DraftObject store (NoSQL)Flexible data schemaTransactionsIndexed fields
Asynchronous API
http://www.w3.org/TR/IndexedDB/Slide32
Limitations
Limited browser supportYoung, changing spec [see: setVersion()]Somewhat complex APISlide33
Code
http://
nparashuram.com/trialtool/index.html#example
=/
IndexedDB/trialtool/moz_indexedDB.htmlSlide34
Browser support
Firefox 4.0+Chrome 11.0+Firefox Mobile 6.0+IE 10.0+ (forthcoming)Slide35
File API: WriterSlide36
Main features
W3C Working DraftSandboxed filesystemGreat for fairly large data storageBinary data management
Asynchronous API
http://www.w3.org/TR/file-writer-api/Slide37
Limitations
Very limited browser supportNo indexingSpec still being sorted out (see: “File API: Directories and System”)Slide38
Code
http://www.html5rocks.com/en/tutorials/file/filesystem/Slide39
Browser support
Chrome 13.0+ (partial support from 8.0)Slide40
What to do NOW?Slide41
Web (DOM) Storage
Pretty much universally supported.Slide42
Web SQL DB
Do you need to support all browsers?Slide43
IndexedDB API
The future?Slide44
Libraries
The solution to the browser problem?Slide45
lawnchairSlide46
lawnchair
Collection of objectsAdapters for:Web StorageIndexedDB
Web SQL Database
window.name
Google Gears
IE
userData
BlackBerry persistent store
In-memory storeSlide47
lawnchair
http://
westcoastlogic.com/lawnchair/saving
/Slide48
lawnchair
persistence.jsSlide49
persistence.js
Asynchronous JavaScript object-relational mapperAdapters 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)”Slide50
persistence.js
https://
github.com/zefhemel/persistencejsSlide51
lawnchair
persistence.jspersistJSSlide52
lawnchair
persistence.jspersistJSamplify.storeSlide53
lawnchair
persistence.jspersistJSamplify.storelocalStorageDBSlide54
lawnchair
persistence.jspersistJSamplify.storelocalStorageDB
https://
github.com
/
axemclion
/
IndexedDBSlide55
lawnchair
persistence.jspersistJSamplify.storelocalStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorageSlide56
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOfflineSlide57
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storageSlide58
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQLSlide59
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
ImpelSlide60
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecordSlide61
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecord
JazzRecordSlide62
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecord
JazzRecord
picnet.data.DataManagerSlide63
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecord
JazzRecord
picnet.data.DataManager
ShinyCarSlide64
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecord
JazzRecord
picnet.data.DataManager
ShinyCar
lscacheSlide65
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecord
JazzRecord
picnet.data.DataManager
ShinyCar
lscache
KizzySlide66
lawnchair
persistence.jspersistJSamplify.store
localStorageDB
https://
github.com
/
axemclion
/
IndexedDB
realStorage
YUI3
CacheOffline
dojox.storage
DomSQL
Impel
ActiveJS
ActiveRecord
JazzRecord
picnet.data.DataManager
ShinyCar
lscache
Kizzy
ArtemiaSlide67
lawnchair
persistence.jspersistJSamplify.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.jsSlide68
lawnchair
persistence.jspersistJSamplify.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.jsSlide69
Thanks!
jason_casden@ncsu.edu@cazzerson
Slides: go.ncsu.edu/c4l12casden
Suma:
github.com/cazzerson/suma