Local Storage for Web Applications
2 likes•1,544 views
The document provides an overview of local storage technologies for web applications, highlighting the evolution from traditional cookies to HTML5's local storage and indexed database API. It details various local storage options, their benefits, specifications, and browser support, while also discussing research topics related to optimizing web performance. Key technologies addressed include HTML5 local storage, IndexedDB, and the deprecated Web SQL Database, supported by practical examples and code snippets.
![Example and Demo
// Insert new tweet
t.executeSql( ”INSERT INTO tweets (id, screen_name, date,
text) VALUES (?, ?, ?, ?), [tweet.id, tweet.from_user,
tweet / 1000, tweet.text]” );
http://html5demos.com/database
23](https://image.slidesharecdn.com/localstorageforwebapplications-presentation-130228033402-phpapp01/85/Local-Storage-for-Web-Applications-23-320.jpg)
Local Storage for Web Applications
- 1. Local Storage for Web Applications T-111.5502 Seminar on Media Technology B P (4-8 cr) Presentation Markku Laine, M.Sc. (Tech.) [email protected] 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
- 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
- 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, 2011 http://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 data localStorage.setItem( ”key”, ”value” ) // Retrieve persistent data localStorage.getItem( ”key” ) // Retrieve the name of the key localStorage.key( number ) // Retrieve the number of key-value pairs localStorage.length // Remove persistent data localStorage.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, 2011 http://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 database var db = window.indexedDBSync.open( ”todos” ); // Open an object store var objectStore = db.openObjectStore( ”todo”, 0 ); // read-write // Add data to an object store objectStore.add( { ”text”: ”todo text”, ”timeStamp”: new Date().getTime() } ); 19
- 20. Browser Support http://caniuse.com/#search=indexedDB 20
- 21. Web SQL Database Working 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 tweet t.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, 2011 http://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 Options Name Standard Features Data type Storage space Browser support Cookie IETF RFC 2109, IETF RFC simple key-value string 4 kB all major 2965 pairs, information (serialization) via HTTP headers Local 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 keys Web 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? [email protected] 32