Local Storage for Web Applications


Published on

My preliminary presentation for the report "Client-Side Storage in Web Application". 2012.
by Markku Laine, http://www.tinyurl.com/mplaine

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Local Storage for Web Applications

  1. 1. Local Storage for WebApplicationsT-111.5502 Seminar on Media Technology B P (4-8 cr)PresentationMarkku Laine, M.Sc. (Tech.)markku.laine@aalto.fi November 22, 2011
  2. 2. Presentation Outline•  Introduction•  Evolution•  Revolution: The HTML5 Approach –  Web Storage –  Indexed Database API –  Web SQL Database –  HTML5 Offline•  Research topics•  Conclusion 2
  3. 3. Introduction 3
  4. 4. Conventional Interaction Model 4
  5. 5. Modern Interaction Model 5
  6. 6. Benefits of Local Storage•  Reduces server load•  Less data to be transferred•  Faster websites•  Enables offline support•  Improves user experience 6
  7. 7. Evolution 7
  8. 8. Cookie•  Conventional approach•  Simple key-value pairs•  Information via HTTP headers –  Extra overhead•  Typically used for session management•  Storage size limited to 4 kB –  Way too small for modern Web applications•  Problems when running the same application in multiple windows•  Supported by major browsers 8
  9. 9. Local Shared Object (Flash Cookie)•  Proprietary browser plug-in (Adobe Flash 6+, 2002)•  Storage size limited to 100 kB per domain (can be increased)•  ExternalInterface (Adobe Flash 8+, 2006) –  Easy and fast access to LSOs from JavaScript 9
  10. 10. (Google) Gears: R.I.P. 2007-2011•  Open-source browser plug-in, http://gears.google.com/•  Several major APIs: e.g., Database (SQLite), WorkerPool, LocalServer, Desktop, and Geolocation•  Storage size unlimited per domain•  Focus from Gears to HTML5 and associated APIs: Indexed Database API, Web Workers, Geolocation API•  Does not support newer browser versions 10
  11. 11. Revolution:The HTML5 Approach 11
  12. 12. Motivations•  Standardized APIs•  Native support by major browsers (no plug-ins)•  Increase storage limitations•  Persistent storage 12
  13. 13. Web Storage Working Draft October 25, 2011http://www.w3.org/TR/webstorage/ 13
  14. 14. Overview•  Beloved child has many names: HTML5 Storage, Local Storage, DOM Storage•  Improved cookies –  Simple key-value pairs –  Stores data in a Web browser, persistently•  localStorage (Persisted Cookies) and sessionStorage (Session Cookies) accessible via global window object•  Enables running the same application in multiple windows•  Storage size limited to 5-10 MB per domain (default) 14
  15. 15. Examples and Demo// Store persistent datalocalStorage.setItem( ”key”, ”value” )// Retrieve persistent datalocalStorage.getItem( ”key” )// Retrieve the name of the keylocalStorage.key( number )// Retrieve the number of key-value pairslocalStorage.length// Remove persistent datalocalStorage.removeItem( ”key” )http://html5demos.com/storage 15
  16. 16. Browser Support Source: http://caniuse.com/#search=web%20storage 16
  17. 17. Indexed Database API Working Draft April 19, 2011http://www.w3.org/TR/IndexedDB/ 17
  18. 18. Overview•  Beloved child has many names: IndexedDB, WebSimpleDB API•  Newest of the three specifications•  Simple values and hierarchical objects•  An advanced version of Web Storage, support for –  Robust indexes –  efficient searching over keys –  duplicate keys (multiple values for a key)•  Allows for advanced data scenarios on the client•  Asynchronous database requests 18
  19. 19. (Sync) Examples// Open a databasevar db = window.indexedDBSync.open( ”todos” );// Open an object storevar objectStore = db.openObjectStore( ”todo”, 0 ); // read-write// Add data to an object storeobjectStore.add( { ”text”: ”todo text”, ”timeStamp”: new Date().getTime() } ); 19
  20. 20. Browser Support http://caniuse.com/#search=indexedDB 20
  21. 21. Web SQL DatabaseWorking Group Note November 18, 2010 http://www.w3.org/TR/webdatabase/ 21
  22. 22. Overview•  Beloved child has many names: WebDB•  As of November 18, 2010 a deprecated specification –  Not enough independent implementations –  All use SQLite as the database engine•  Manipulate client-side databases using SQL –  A variant of SQL•  Asynchronous database requests•  The most advanced client storage specification 22
  23. 23. Example and Demo// Insert new tweett.executeSql( ”INSERT INTO tweets (id, screen_name, date, text) VALUES (?, ?, ?, ?), [tweet.id, tweet.from_user, tweet / 1000, tweet.text]” );http://html5demos.com/database 23
  24. 24. Browser Support http://caniuse.com/#search=web%20sql%20database 24
  25. 25. HTML5 Offline Working Draft May 25, 2011http://www.w3.org/TR/html5/offline.html 25
  26. 26. Research Topics 26
  27. 27. Silo•  A system that reduces both the number of HTTP requests and the bandwidth required to construct a page•  Uses JavaScript and Web Storage à no plug-ins needed•  The idea is to store JavaScript and CSS fragments in a local storage. When a web page is requested, only the server asks which fragments are missing and sends them to the client in one file 27
  28. 28. Sync Kit•  Client-server toolkit•  Uses JavaScript and (Google) Gears•  Offloads some data storage and processing from a web server onto the web browsers•  Synchronizes relational database tables between the browser and the web server•  Persists both data and templates across web sessions•  Increases server load handling capability from 3 to 4 times 28
  29. 29. Conclusion 29
  30. 30. Comparison of Local Storage OptionsName Standard Features Data type Storage space Browser supportCookie IETF RFC 2109, IETF RFC simple key-value string 4 kB all major 2965 pairs, information (serialization) via HTTP headersLocal Shared Object proprietary browser plug-in alternative to Flash data 100 kB per all major via Adobe(Flash cookie) (Adobe) cookies, types domain (can be Flash Player 6+ plug-in accessible from increased) JavaScript(Google) Gears open source browser plug- relational many unlimited per deprecated (old in (BSD License) database (SQLite) domain (SQLite versions via Gears limitations) plug-in)Web Storage Working Draft simple key-value string 5-10 MB (can IE 8+, Firefox 2.0/3.5+, pairs, no duplicate (serialization) be increased) Chrome 4/5+, Safari values for a key 4+, Opera 10.5+Indexed Database API Working Draft indexed key-value many N/A IE 10+, Firefox 4+, pairs, duplicate Chrome 11+ values for a key, efficient searching over keysWeb SQL Database Working Group Note SQL queries many 5 MB (can be “deprecated” Chrome (variant) increased) 4+, Safari 3.1/4.0+, Opera 10.5+ 30
  31. 31. References•  Local Storage – Dive into HTML5: http://diveintohtml5.info/storage.html•  Lawson, B. and Sharp, R. ”Introducing HTML5”. New Riders, 2011.•  Mickens, J. ”Silo: Exploiting JavaScript and DOM Storage for Faster Page Loads”. In WebApps/USENIX, 2010.•  Benson, E. et al. ”Sync Kit: A Persistent Client-Side Database Caching Toolkit for Data Intensive Websites”. In WWW, 2010.•  Cannon, B. and Wohlstadter, E. ”Automated Object Persistence for JavaScript”. In WWW, 2010. 31
  32. 32. Thank You! Questions? Comments? markku.laine@aalto.fi 32