SlideShare a Scribd company logo
In-browser storage and me

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 isn’t transmitted to the server”

- Mark Pilgrim, Dive Into HTML5



                                  http://diveintohtml5.info/storage.html
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
Potential library uses
Potential library uses
• Staff-facing apps
  – Barcode scan
  – Stacks tools
  – Mobile data collection tools
• Caching (geotagged) collections data
• Catalog shopping cart
In-browser storage IRL (Suma)
Suma


   Replace and dramatically
 improve the entire workflow
  for collecting and analyzing
data about the use of physical
      spaces and services.
Illustration by Joyce Chapman
In-browser storage and me
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
• Browser-specific features
   – IE's userData
   – Mozilla globalStorage
   – Filesystem features used by TiddlyWiki
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 Storage

aka localStorage, DOM Storage
Main features
• W3C Candidate Recommendation (split
  from HTML5)
• Named key-value store
• Widespread browser support
• Simple API




                    http://www.w3.org/TR/webstorage/
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
Code
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+
Web SQL Database

    aka WebDB
Main features
•   W3C Working Draft
•   Basically, it's SQLite
•   Very solid mobile support
•   Good performance
•   Indexing
•   Transactions
•   Asynchronous API features
…this is awkward.




         http://www.w3.org/TR/webdatabase/
Limitations
• Deprecated
• No Mozilla or IE support
• Requires SQL/RDBMS experience
Code




http://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.1+
Indexed Database API

aka IndexedDB, WebSimpleDB
Main features
•   W3C Working Draft
•   Object store (NoSQL)
•   Flexible data schema
•   Transactions
•   Indexed fields
•   Asynchronous API



                           http://www.w3.org/TR/IndexedDB/
Limitations
• Limited browser support
• Young, changing spec [see: setVersion()]
• Somewhat complex API
Code




http://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 management
•   Asynchronous API




                        http://www.w3.org/TR/file-writer-api/
Limitations
• Very limited browser support
• No indexing
• Spec still being sorted out (see: “File API:
  Directories and System”)
Code




http://www.html5rocks.com/en/tutorials/file/filesystem/
Browser support
• Chrome 13.0+ (partial support from 8.0)
What to do NOW?
Web (DOM) Storage

Pretty much universally
      supported.
Web SQL DB

Do you need to support all
        browsers?
IndexedDB API

  The future?
Libraries

The solution to the browser
         problem?
• lawnchair
lawnchair
• Collection of objects
• Adapters for:
  –   Web Storage
  –   IndexedDB
  –   Web SQL Database
  –   window.name
  –   Google Gears
  –   IE userData
  –   BlackBerry persistent store
  –   In-memory store
lawnchair




 http://westcoastlogic.com/lawnchair/saving/
• lawnchair
• persistence.js
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)”
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
• realStorage
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
• https://github.com/axemclion/IndexedDB
• realStorage
• YUI3 CacheOffline
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
• https://github.com/axemclion/IndexedDB
• realStorage
• YUI3 CacheOffline
• dojox.storage
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
• https://github.com/axemclion/IndexedDB
•   realStorage
•   YUI3 CacheOffline
•   dojox.storage
•   DomSQL
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
• https://github.com/axemclion/IndexedDB
•   realStorage
•   YUI3 CacheOffline
•   dojox.storage
•   DomSQL
•   Impel
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
• https://github.com/axemclion/IndexedDB
•   realStorage
•   YUI3 CacheOffline
•   dojox.storage
•   DomSQL
•   Impel
•   ActiveJSActiveRecord
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
• https://github.com/axemclion/IndexedDB
•   realStorage
•   YUI3 CacheOffline
•   dojox.storage
•   DomSQL
•   Impel
•   ActiveJSActiveRecord
•   JazzRecord
•   lawnchair
•   persistence.js
•   persistJS
•   amplify.store
•   localStorageDB
•   https://github.com/axemclion/IndexedDB
•   realStorage
•   YUI3 CacheOffline
•   dojox.storage
•   DomSQL
•   Impel
•   ActiveJSActiveRecord
•   JazzRecord
•   picnet.data.DataManager
•   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
•   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
•   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
•   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
•   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
•   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
Thanks!

jason_casden@ncsu.edu
@cazzerson

Slides: go.ncsu.edu/c4l12casden

Suma: github.com/cazzerson/suma

More Related Content

What's hot

Catch 22: FLex APps
Catch 22: FLex APpsCatch 22: FLex APps
Catch 22: FLex APps
Yash Mody
 
JS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 HourJS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 Hour
Valeri Karpov
 
API Design & Security in django
API Design & Security in djangoAPI Design & Security in django
API Design & Security in django
Tareque Hossain
 
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Corey Clark, Ph.D.
 
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkersBringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
Corey Clark, Ph.D.
 
DotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + reactDotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + react
Chen-Tien Tsai
 
Offline first, the painless way
Offline first, the painless wayOffline first, the painless way
Offline first, the painless way
Marcel Kalveram
 
MEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopMEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona Workshop
Valeri Karpov
 
Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
drupalcampest
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
Irfan Maulana
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Irfan Maulana
 
DevOps tools for everyone - Vagrant, Puppet and Webmin
DevOps tools for everyone - Vagrant, Puppet and WebminDevOps tools for everyone - Vagrant, Puppet and Webmin
DevOps tools for everyone - Vagrant, Puppet and Webmin
postrational
 
Afrimadoni the power of docker
Afrimadoni   the power of dockerAfrimadoni   the power of docker
Afrimadoni the power of docker
PHP Indonesia
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
Building APIs with NodeJS on Microsoft Azure Websites - Redmond
Building APIs with NodeJS on Microsoft Azure Websites - RedmondBuilding APIs with NodeJS on Microsoft Azure Websites - Redmond
Building APIs with NodeJS on Microsoft Azure Websites - Redmond
Rick G. Garibay
 
Django rest framework
Django rest frameworkDjango rest framework
Django rest framework
Blank Chen
 
Bringing Interactivity to Your Drupal Site with Node.js Integration
Bringing Interactivity to Your Drupal Site with Node.js IntegrationBringing Interactivity to Your Drupal Site with Node.js Integration
Bringing Interactivity to Your Drupal Site with Node.js Integration
Acquia
 
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...
Codemotion
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
jeresig
 
Html5 storage suggestions for challenges.pptx
Html5 storage   suggestions for challenges.pptxHtml5 storage   suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
deepmoteria
 

What's hot (20)

Catch 22: FLex APps
Catch 22: FLex APpsCatch 22: FLex APps
Catch 22: FLex APps
 
JS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 HourJS-IL: Getting MEAN in 1 Hour
JS-IL: Getting MEAN in 1 Hour
 
API Design & Security in django
API Design & Security in djangoAPI Design & Security in django
API Design & Security in django
 
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
Building a Multithreaded Web-Based Game Engine Using HTML5/CSS3 and JavaScrip...
 
Bringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkersBringing The Sexy Back To WebWorkers
Bringing The Sexy Back To WebWorkers
 
DotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + reactDotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + react
 
Offline first, the painless way
Offline first, the painless wayOffline first, the painless way
Offline first, the painless way
 
MEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopMEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona Workshop
 
Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS Developing realtime apps with Drupal and NodeJS
Developing realtime apps with Drupal and NodeJS
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
 
DevOps tools for everyone - Vagrant, Puppet and Webmin
DevOps tools for everyone - Vagrant, Puppet and WebminDevOps tools for everyone - Vagrant, Puppet and Webmin
DevOps tools for everyone - Vagrant, Puppet and Webmin
 
Afrimadoni the power of docker
Afrimadoni   the power of dockerAfrimadoni   the power of docker
Afrimadoni the power of docker
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Building APIs with NodeJS on Microsoft Azure Websites - Redmond
Building APIs with NodeJS on Microsoft Azure Websites - RedmondBuilding APIs with NodeJS on Microsoft Azure Websites - Redmond
Building APIs with NodeJS on Microsoft Azure Websites - Redmond
 
Django rest framework
Django rest frameworkDjango rest framework
Django rest framework
 
Bringing Interactivity to Your Drupal Site with Node.js Integration
Bringing Interactivity to Your Drupal Site with Node.js IntegrationBringing Interactivity to Your Drupal Site with Node.js Integration
Bringing Interactivity to Your Drupal Site with Node.js Integration
 
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...
Tech Webinar: Offline First: Creare un'app Phonegap che funzioni offline e si...
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
 
Html5 storage suggestions for challenges.pptx
Html5 storage   suggestions for challenges.pptxHtml5 storage   suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
 

Similar to In-browser storage and me

Notes on SF W3Conf
Notes on SF W3ConfNotes on SF W3Conf
Notes on SF W3Conf
Edy Dawson
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
Guillermo Paz
 
Local Storage for Web Applications
Local Storage for Web ApplicationsLocal Storage for Web Applications
Local Storage for Web Applications
Markku Laine
 
DrupalCon 2011 Highlight
DrupalCon 2011 HighlightDrupalCon 2011 Highlight
DrupalCon 2011 Highlight
Supakit Kiatrungrit
 
Not Just ORM: Powerful Hibernate ORM Features and Capabilities
Not Just ORM: Powerful Hibernate ORM Features and CapabilitiesNot Just ORM: Powerful Hibernate ORM Features and Capabilities
Not Just ORM: Powerful Hibernate ORM Features and Capabilities
Brett Meyer
 
hibernateormfeatures-140223193044-phpapp02.pdf
hibernateormfeatures-140223193044-phpapp02.pdfhibernateormfeatures-140223193044-phpapp02.pdf
hibernateormfeatures-140223193044-phpapp02.pdf
Patiento Del Mar
 
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devicesThe Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
Wesley Hales
 
Accelerating Rails with edge caching
Accelerating Rails with edge cachingAccelerating Rails with edge caching
Accelerating Rails with edge caching
Michael May
 
End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012
Alexandre Morgaut
 
DOTNET8.pptx
DOTNET8.pptxDOTNET8.pptx
DOTNET8.pptx
Udaiappa Ramachandran
 
Webinar - DreamObjects/Ceph Case Study
Webinar - DreamObjects/Ceph Case StudyWebinar - DreamObjects/Ceph Case Study
Webinar - DreamObjects/Ceph Case Study
Ceph Community
 
Is the database a solved problem?
Is the database a solved problem?Is the database a solved problem?
Is the database a solved problem?
Kenneth Geisshirt
 
Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!
Brian Culver
 
Drupal 7 - The Top 40 Core Modules and What They Mean for You
Drupal 7 - The Top 40 Core Modules and What They Mean for YouDrupal 7 - The Top 40 Core Modules and What They Mean for You
Drupal 7 - The Top 40 Core Modules and What They Mean for You
Acquia
 
DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought
Nick Santamaria
 
Where to save my data, for devs!
Where to save my data, for devs!Where to save my data, for devs!
Where to save my data, for devs!
SharePoint Saturday New Jersey
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
Acquia
 
初心者向けGAE/Java説明資料
初心者向けGAE/Java説明資料初心者向けGAE/Java説明資料
初心者向けGAE/Java説明資料
Shinichi Ogawa
 
Drupal performance
Drupal performanceDrupal performance
Drupal performance
Gabi Lee
 
SharePoint Saturday San Antonio: SharePoint 2010 Performance
SharePoint Saturday San Antonio: SharePoint 2010 PerformanceSharePoint Saturday San Antonio: SharePoint 2010 Performance
SharePoint Saturday San Antonio: SharePoint 2010 Performance
Brian Culver
 

Similar to In-browser storage and me (20)

Notes on SF W3Conf
Notes on SF W3ConfNotes on SF W3Conf
Notes on SF W3Conf
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
Local Storage for Web Applications
Local Storage for Web ApplicationsLocal Storage for Web Applications
Local Storage for Web Applications
 
DrupalCon 2011 Highlight
DrupalCon 2011 HighlightDrupalCon 2011 Highlight
DrupalCon 2011 Highlight
 
Not Just ORM: Powerful Hibernate ORM Features and Capabilities
Not Just ORM: Powerful Hibernate ORM Features and CapabilitiesNot Just ORM: Powerful Hibernate ORM Features and Capabilities
Not Just ORM: Powerful Hibernate ORM Features and Capabilities
 
hibernateormfeatures-140223193044-phpapp02.pdf
hibernateormfeatures-140223193044-phpapp02.pdfhibernateormfeatures-140223193044-phpapp02.pdf
hibernateormfeatures-140223193044-phpapp02.pdf
 
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devicesThe Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
 
Accelerating Rails with edge caching
Accelerating Rails with edge cachingAccelerating Rails with edge caching
Accelerating Rails with edge caching
 
End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012End-to-end W3C APIs - tpac 2012
End-to-end W3C APIs - tpac 2012
 
DOTNET8.pptx
DOTNET8.pptxDOTNET8.pptx
DOTNET8.pptx
 
Webinar - DreamObjects/Ceph Case Study
Webinar - DreamObjects/Ceph Case StudyWebinar - DreamObjects/Ceph Case Study
Webinar - DreamObjects/Ceph Case Study
 
Is the database a solved problem?
Is the database a solved problem?Is the database a solved problem?
Is the database a solved problem?
 
Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!Boost the Performance of SharePoint Today!
Boost the Performance of SharePoint Today!
 
Drupal 7 - The Top 40 Core Modules and What They Mean for You
Drupal 7 - The Top 40 Core Modules and What They Mean for YouDrupal 7 - The Top 40 Core Modules and What They Mean for You
Drupal 7 - The Top 40 Core Modules and What They Mean for You
 
DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought
 
Where to save my data, for devs!
Where to save my data, for devs!Where to save my data, for devs!
Where to save my data, for devs!
 
5 Common Mistakes You are Making on your Website
 5 Common Mistakes You are Making on your Website 5 Common Mistakes You are Making on your Website
5 Common Mistakes You are Making on your Website
 
初心者向けGAE/Java説明資料
初心者向けGAE/Java説明資料初心者向けGAE/Java説明資料
初心者向けGAE/Java説明資料
 
Drupal performance
Drupal performanceDrupal performance
Drupal performance
 
SharePoint Saturday San Antonio: SharePoint 2010 Performance
SharePoint Saturday San Antonio: SharePoint 2010 PerformanceSharePoint Saturday San Antonio: SharePoint 2010 Performance
SharePoint Saturday San Antonio: SharePoint 2010 Performance
 

More from Jason Casden

Building and Managing Social Media Collections
Building and Managing Social Media CollectionsBuilding and Managing Social Media Collections
Building and Managing Social Media Collections
Jason Casden
 
My #HuntLibrary: Collecting student images
My #HuntLibrary: Collecting student imagesMy #HuntLibrary: Collecting student images
My #HuntLibrary: Collecting student images
Jason Casden
 
Fail4Lib
Fail4LibFail4Lib
Fail4Lib
Jason Casden
 
Blending in-person and online library services by utilizing mobile technology
Blending in-person and online library services by utilizing mobile technologyBlending in-person and online library services by utilizing mobile technology
Blending in-person and online library services by utilizing mobile technology
Jason Casden
 
Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...
Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...
Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...
Jason Casden
 
In Context: Case Studies in Integrated Physical and Virtual Library Service D...
In Context: Case Studies in Integrated Physical and Virtual Library Service D...In Context: Case Studies in Integrated Physical and Virtual Library Service D...
In Context: Case Studies in Integrated Physical and Virtual Library Service D...
Jason Casden
 
Mobile Sensors: Building a staff-facing tablet application for library assess...
Mobile Sensors: Building a staff-facing tablet application for library assess...Mobile Sensors: Building a staff-facing tablet application for library assess...
Mobile Sensors: Building a staff-facing tablet application for library assess...
Jason Casden
 
Building an Open Source Staff-Facing Tablet App for Library Assessment
Building an Open Source Staff-Facing Tablet App for Library AssessmentBuilding an Open Source Staff-Facing Tablet App for Library Assessment
Building an Open Source Staff-Facing Tablet App for Library Assessment
Jason Casden
 

More from Jason Casden (8)

Building and Managing Social Media Collections
Building and Managing Social Media CollectionsBuilding and Managing Social Media Collections
Building and Managing Social Media Collections
 
My #HuntLibrary: Collecting student images
My #HuntLibrary: Collecting student imagesMy #HuntLibrary: Collecting student images
My #HuntLibrary: Collecting student images
 
Fail4Lib
Fail4LibFail4Lib
Fail4Lib
 
Blending in-person and online library services by utilizing mobile technology
Blending in-person and online library services by utilizing mobile technologyBlending in-person and online library services by utilizing mobile technology
Blending in-person and online library services by utilizing mobile technology
 
Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...
Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...
Where Am I? How Did I Get Here? WolfWalk: A Location-Aware Mobile Interface t...
 
In Context: Case Studies in Integrated Physical and Virtual Library Service D...
In Context: Case Studies in Integrated Physical and Virtual Library Service D...In Context: Case Studies in Integrated Physical and Virtual Library Service D...
In Context: Case Studies in Integrated Physical and Virtual Library Service D...
 
Mobile Sensors: Building a staff-facing tablet application for library assess...
Mobile Sensors: Building a staff-facing tablet application for library assess...Mobile Sensors: Building a staff-facing tablet application for library assess...
Mobile Sensors: Building a staff-facing tablet application for library assess...
 
Building an Open Source Staff-Facing Tablet App for Library Assessment
Building an Open Source Staff-Facing Tablet App for Library AssessmentBuilding an Open Source Staff-Facing Tablet App for Library Assessment
Building an Open Source Staff-Facing Tablet App for Library Assessment
 

Recently uploaded

Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
LINUS PROJECTS (INDIA)
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 

Recently uploaded (20)

Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Pigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending PlantPigging Unit Lubricant Oil Blending Plant
Pigging Unit Lubricant Oil Blending Plant
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 

In-browser storage and me

  • 1. In-browser storage and me Jason Casden North Carolina State University Libraries Code4Lib 2012
  • 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. 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
  • 5. Potential library uses • Staff-facing apps – Barcode scan – Stacks tools – Mobile data collection tools • Caching (geotagged) collections data • Catalog shopping cart
  • 7. Suma Replace and dramatically improve the entire workflow for collecting and analyzing data about the use of physical spaces and services.
  • 10. What is the data?
  • 12. Joyce Chapman, Suma team member.
  • 13. How many Sumas can I put you down for? https://github.com/cazzerson/suma
  • 14. 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
  • 16. “A lot of storage space” • 5MB is the magic number • Can sometimes be increased • Some differences between browsers
  • 17. Presentation scope • No SessionStorage • No in-memory storage • No ApplicationCache
  • 20. Main features • W3C Candidate Recommendation (split from HTML5) • Named key-value store • Widespread browser support • Simple API http://www.w3.org/TR/webstorage/
  • 21. 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
  • 22. Code
  • 23. 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+
  • 24. Web SQL Database aka WebDB
  • 25. Main features • W3C Working Draft • Basically, it's SQLite • Very solid mobile support • Good performance • Indexing • Transactions • Asynchronous API features
  • 26. …this is awkward. http://www.w3.org/TR/webdatabase/
  • 27. Limitations • Deprecated • No Mozilla or IE support • Requires SQL/RDBMS experience
  • 29. Browser support • Chrome 4.0+ • Safari 3.1+ • Opera 10.5+ • iOS Safari 3.2+ • Opera Mobile 11.0+ • Android Browser 2.1+
  • 30. Indexed Database API aka IndexedDB, WebSimpleDB
  • 31. Main features • W3C Working Draft • Object store (NoSQL) • Flexible data schema • Transactions • Indexed fields • Asynchronous API http://www.w3.org/TR/IndexedDB/
  • 32. Limitations • Limited browser support • Young, changing spec [see: setVersion()] • Somewhat complex API
  • 34. Browser support • Firefox 4.0+ • Chrome 11.0+ • Firefox Mobile 6.0+ • IE 10.0+ (forthcoming)
  • 36. 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/
  • 37. Limitations • Very limited browser support • No indexing • Spec still being sorted out (see: “File API: Directories and System”)
  • 39. Browser support • Chrome 13.0+ (partial support from 8.0)
  • 40. What to do NOW?
  • 41. Web (DOM) Storage Pretty much universally supported.
  • 42. Web SQL DB Do you need to support all browsers?
  • 43. IndexedDB API The future?
  • 44. Libraries The solution to the browser problem?
  • 46. lawnchair • Collection of objects • Adapters for: – Web Storage – IndexedDB – Web SQL Database – window.name – Google Gears – IE userData – BlackBerry persistent store – In-memory store
  • 49. 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)”
  • 50. persistence.js https://github.com/zefhemel/persistencejs
  • 52. lawnchair • persistence.js • persistJS • amplify.store
  • 53. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB
  • 54. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB
  • 55. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage
  • 56. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage • YUI3 CacheOffline
  • 57. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage • YUI3 CacheOffline • dojox.storage
  • 58. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage • YUI3 CacheOffline • dojox.storage • DomSQL
  • 59. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage • YUI3 CacheOffline • dojox.storage • DomSQL • Impel
  • 60. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage • YUI3 CacheOffline • dojox.storage • DomSQL • Impel • ActiveJSActiveRecord
  • 61. lawnchair • persistence.js • persistJS • amplify.store • localStorageDB • https://github.com/axemclion/IndexedDB • realStorage • YUI3 CacheOffline • dojox.storage • DomSQL • Impel • ActiveJSActiveRecord • JazzRecord
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 68. 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