Your SlideShare is downloading. ×
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Local Storage for Web Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Local Storage for Web Applications

766

Published on

My preliminary presentation for the report "Client-Side Storage in Web Application". 2012. …

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
766
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Presentation Outline•  Introduction•  Evolution•  Revolution: The HTML5 Approach –  Web Storage –  Indexed Database API –  Web SQL Database –  HTML5 Offline•  Research topics•  Conclusion 2
  • 3. Introduction 3
  • 4. Conventional Interaction Model 4
  • 5. Modern Interaction Model 5
  • 6. Benefits of Local Storage•  Reduces server load•  Less data to be transferred•  Faster websites•  Enables offline support•  Improves user experience 6
  • 7. Evolution 7
  • 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. 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. (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. Revolution:The HTML5 Approach 11
  • 12. Motivations•  Standardized APIs•  Native support by major browsers (no plug-ins)•  Increase storage limitations•  Persistent storage 12
  • 13. Web Storage Working Draft October 25, 2011http://www.w3.org/TR/webstorage/ 13
  • 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. 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. Browser Support Source: http://caniuse.com/#search=web%20storage 16
  • 17. Indexed Database API Working Draft April 19, 2011http://www.w3.org/TR/IndexedDB/ 17
  • 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. (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. Browser Support http://caniuse.com/#search=indexedDB 20
  • 21. Web SQL DatabaseWorking Group Note November 18, 2010 http://www.w3.org/TR/webdatabase/ 21
  • 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. 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. Browser Support http://caniuse.com/#search=web%20sql%20database 24
  • 25. HTML5 Offline Working Draft May 25, 2011http://www.w3.org/TR/html5/offline.html 25
  • 26. Research Topics 26
  • 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. 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. Conclusion 29
  • 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. 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. Thank You! Questions? Comments? markku.laine@aalto.fi 32

×