Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
In-browser storage and meJason CasdenNorth Carolina State University LibrariesCode4Lib 2012
“What      we really want is   – a lot of storage space   – on the client   – that persists beyond a page refresh   – and ...
Themes• “A lot of space”  – Reasonably large amounts of various types of data  – Caching binary content• Network independe...
Potential library uses
Potential library uses• Staff-facing apps  – Barcode scan  – Stacks tools  – Mobile data collection tools• Caching (geotag...
In-browser storage IRL (Suma)
Suma   Replace and dramatically improve the entire workflow  for collecting and analyzingdata about the use of physical   ...
Illustration by Joyce Chapman
What is the data?
Data synchronization
Joyce Chapman, Suma team member.
How many Sumas can I put you down for?https://github.com/cazzerson/suma
Other attempts• Cookies• Plugins   –   Flash   –   Silverlight   –   Java   –   Google Gears   –   etc.• window.name• Brow...
Persistence?
“A lot of storage space”• 5MB is the magic number• Can sometimes be increased• Some differences between browsers
Presentation scope• No SessionStorage• No in-memory storage• No ApplicationCache
Current options
Web Storageaka localStorage, DOM Storage
Main features• W3C Candidate Recommendation (split  from HTML5)• Named key-value store• Widespread browser support• Simple...
Limitations• Performance can be poor  – No indexing  – Need to fake relational or object store    features• Values are str...
Code
Browser support•   Firefox 3.5+•   Chrome 4.0+•   Safari 4.0+•   Opera 10.5+•   IE 8.0+•   iOS Safari 3.2+•   Firefox mobi...
Web SQL Database    aka WebDB
Main features•   W3C Working Draft•   Basically, its SQLite•   Very solid mobile support•   Good performance•   Indexing• ...
…this is awkward.         http://www.w3.org/TR/webdatabase/
Limitations• Deprecated• No Mozilla or IE support• Requires SQL/RDBMS experience
Codehttp://html5doctor.com/introducing-web-sql-databases/
Browser support•   Chrome 4.0+•   Safari 3.1+•   Opera 10.5+•   iOS Safari 3.2+•   Opera Mobile 11.0+•   Android Browser 2...
Indexed Database APIaka IndexedDB, WebSimpleDB
Main features•   W3C Working Draft•   Object store (NoSQL)•   Flexible data schema•   Transactions•   Indexed fields•   As...
Limitations• Limited browser support• Young, changing spec [see: setVersion()]• Somewhat complex API
Codehttp://nparashuram.com/trialtool/index.html#example=/IndexedDB/trialtool/moz_indexedDB.html
Browser support•   Firefox 4.0+•   Chrome 11.0+•   Firefox Mobile 6.0+•   IE 10.0+ (forthcoming)
File API: Writer
Main features•   W3C Working Draft•   Sandboxed filesystem•   Great for fairly large data storage•   Binary data managemen...
Limitations• Very limited browser support• No indexing• Spec still being sorted out (see: “File API:  Directories and Syst...
Codehttp://www.html5rocks.com/en/tutorials/file/filesystem/
Browser support• Chrome 13.0+ (partial support from 8.0)
What to do NOW?
Web (DOM) StoragePretty much universally      supported.
Web SQL DBDo you need to support all        browsers?
IndexedDB API  The future?
LibrariesThe solution to the browser         problem?
• lawnchair
lawnchair• Collection of objects• Adapters for:  –   Web Storage  –   IndexedDB  –   Web SQL Database  –   window.name  – ...
lawnchair http://westcoastlogic.com/lawnchair/saving/
• lawnchair• persistence.js
persistence.js• Asynchronous JavaScript object-relational  mapper• Adapters for:  – Web SQL Database  – Google Gears  – In...
persistence.js     https://github.com/zefhemel/persistencejs
• lawnchair• persistence.js• persistJS
•   lawnchair•   persistence.js•   persistJS•   amplify.store
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB• r...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB• r...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB• r...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB•  ...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB•  ...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB•  ...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB• https://github.com/axemclion/IndexedDB•  ...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
•   lawnchair•   persistence.js•   persistJS•   amplify.store•   localStorageDB•   https://github.com/axemclion/IndexedDB•...
Thanks!jason_casden@ncsu.edu@cazzersonSlides: go.ncsu.edu/c4l12casdenSuma: github.com/cazzerson/suma
In-browser storage and me
Upcoming SlideShare
Loading in …5
×

In-browser storage and me

6,891 views

Published on

Presented at Code4Lib 2012 on 8 Feb 2012.

Published in: Technology
  • Be the first to comment

In-browser storage and me

  1. 1. In-browser storage and meJason CasdenNorth Carolina State University LibrariesCode4Lib 2012
  2. 2. “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
  3. 3. 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
  4. 4. Potential library uses
  5. 5. Potential library uses• Staff-facing apps – Barcode scan – Stacks tools – Mobile data collection tools• Caching (geotagged) collections data• Catalog shopping cart
  6. 6. In-browser storage IRL (Suma)
  7. 7. Suma Replace and dramatically improve the entire workflow for collecting and analyzingdata about the use of physical spaces and services.
  8. 8. Illustration by Joyce Chapman
  9. 9. What is the data?
  10. 10. Data synchronization
  11. 11. Joyce Chapman, Suma team member.
  12. 12. How many Sumas can I put you down for?https://github.com/cazzerson/suma
  13. 13. Other attempts• Cookies• Plugins – Flash – Silverlight – Java – Google Gears – etc.• window.name• Browser-specific features – IEs userData – Mozilla globalStorage – Filesystem features used by TiddlyWiki
  14. 14. Persistence?
  15. 15. “A lot of storage space”• 5MB is the magic number• Can sometimes be increased• Some differences between browsers
  16. 16. Presentation scope• No SessionStorage• No in-memory storage• No ApplicationCache
  17. 17. Current options
  18. 18. Web Storageaka localStorage, DOM Storage
  19. 19. Main features• W3C Candidate Recommendation (split from HTML5)• Named key-value store• Widespread browser support• Simple API http://www.w3.org/TR/webstorage/
  20. 20. 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
  21. 21. Code
  22. 22. 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+
  23. 23. Web SQL Database aka WebDB
  24. 24. Main features• W3C Working Draft• Basically, its SQLite• Very solid mobile support• Good performance• Indexing• Transactions• Asynchronous API features
  25. 25. …this is awkward. http://www.w3.org/TR/webdatabase/
  26. 26. Limitations• Deprecated• No Mozilla or IE support• Requires SQL/RDBMS experience
  27. 27. Codehttp://html5doctor.com/introducing-web-sql-databases/
  28. 28. Browser support• Chrome 4.0+• Safari 3.1+• Opera 10.5+• iOS Safari 3.2+• Opera Mobile 11.0+• Android Browser 2.1+
  29. 29. Indexed Database APIaka IndexedDB, WebSimpleDB
  30. 30. Main features• W3C Working Draft• Object store (NoSQL)• Flexible data schema• Transactions• Indexed fields• Asynchronous API http://www.w3.org/TR/IndexedDB/
  31. 31. Limitations• Limited browser support• Young, changing spec [see: setVersion()]• Somewhat complex API
  32. 32. Codehttp://nparashuram.com/trialtool/index.html#example=/IndexedDB/trialtool/moz_indexedDB.html
  33. 33. Browser support• Firefox 4.0+• Chrome 11.0+• Firefox Mobile 6.0+• IE 10.0+ (forthcoming)
  34. 34. File API: Writer
  35. 35. 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/
  36. 36. Limitations• Very limited browser support• No indexing• Spec still being sorted out (see: “File API: Directories and System”)
  37. 37. Codehttp://www.html5rocks.com/en/tutorials/file/filesystem/
  38. 38. Browser support• Chrome 13.0+ (partial support from 8.0)
  39. 39. What to do NOW?
  40. 40. Web (DOM) StoragePretty much universally supported.
  41. 41. Web SQL DBDo you need to support all browsers?
  42. 42. IndexedDB API The future?
  43. 43. LibrariesThe solution to the browser problem?
  44. 44. • lawnchair
  45. 45. lawnchair• Collection of objects• Adapters for: – Web Storage – IndexedDB – Web SQL Database – window.name – Google Gears – IE userData – BlackBerry persistent store – In-memory store
  46. 46. lawnchair http://westcoastlogic.com/lawnchair/saving/
  47. 47. • lawnchair• persistence.js
  48. 48. 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)”
  49. 49. persistence.js https://github.com/zefhemel/persistencejs
  50. 50. • lawnchair• persistence.js• persistJS
  51. 51. • lawnchair• persistence.js• persistJS• amplify.store
  52. 52. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB
  53. 53. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB
  54. 54. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage
  55. 55. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline
  56. 56. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage
  57. 57. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL
  58. 58. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel
  59. 59. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord
  60. 60. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord
  61. 61. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager
  62. 62. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar
  63. 63. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache
  64. 64. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy
  65. 65. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy• Artemia
  66. 66. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy• Artemia• microcache.js
  67. 67. • lawnchair• persistence.js• persistJS• amplify.store• localStorageDB• https://github.com/axemclion/IndexedDB• realStorage• YUI3 CacheOffline• dojox.storage• DomSQL• Impel• ActiveJSActiveRecord• JazzRecord• picnet.data.DataManager• ShinyCar• lscache• Kizzy• Artemia• microcache.js• Store.js
  68. 68. Thanks!jason_casden@ncsu.edu@cazzersonSlides: go.ncsu.edu/c4l12casdenSuma: github.com/cazzerson/suma

×