local storage for web applications
DESCRIPTION
My preliminary presentation for the report "Client-Side Storage in Web Application". 2012. by Markku Laine, http://www.tinyurl.com/mplaineTRANSCRIPT
![Page 1: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/1.jpg)
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
![Page 2: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/2.jpg)
Presentation Outline
• Introduction • Evolution • Revolution: The HTML5 Approach
– Web Storage – Indexed Database API – Web SQL Database – HTML5 Offline
• Research topics • Conclusion
2
![Page 3: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/3.jpg)
Introduction
3
![Page 4: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/4.jpg)
Conventional Interaction Model
4
![Page 5: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/5.jpg)
Modern Interaction Model
5
![Page 6: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/6.jpg)
Benefits of Local Storage
• Reduces server load • Less data to be transferred • Faster websites • Enables offline support • Improves user experience
6
![Page 7: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/7.jpg)
Evolution
7
![Page 8: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/8.jpg)
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
![Page 9: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/9.jpg)
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
![Page 10: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/10.jpg)
(Google) Gears: R.I.P. 2007-2011
10
• 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
![Page 11: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/11.jpg)
Revolution: The HTML5 Approach
11
![Page 12: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/12.jpg)
Motivations
• Standardized APIs • Native support by major browsers (no plug-ins) • Increase storage limitations • Persistent storage
12
![Page 13: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/13.jpg)
Web Storage Working Draft October 25, 2011
http://www.w3.org/TR/webstorage/
13
![Page 14: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/14.jpg)
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
![Page 15: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/15.jpg)
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
![Page 16: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/16.jpg)
Browser Support
16
Source: http://caniuse.com/#search=web%20storage
![Page 17: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/17.jpg)
Indexed Database API Working Draft April 19, 2011
http://www.w3.org/TR/IndexedDB/
17
![Page 18: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/18.jpg)
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
![Page 19: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/19.jpg)
(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
![Page 20: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/20.jpg)
Browser Support
20
http://caniuse.com/#search=indexedDB
![Page 21: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/21.jpg)
Web SQL Database Working Group Note November 18, 2010
http://www.w3.org/TR/webdatabase/
21
![Page 22: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/22.jpg)
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
![Page 23: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/23.jpg)
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
![Page 24: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/24.jpg)
Browser Support
24
http://caniuse.com/#search=web%20sql%20database
![Page 25: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/25.jpg)
HTML5 Offline Working Draft May 25, 2011
http://www.w3.org/TR/html5/offline.html
25
![Page 26: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/26.jpg)
Research Topics
26
![Page 27: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/27.jpg)
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
![Page 28: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/28.jpg)
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
![Page 29: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/29.jpg)
Conclusion
29
![Page 30: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/30.jpg)
Comparison of Local Storage Options
Name Standard Features Data type Storage space Browser support
Cookie IETF RFC 2109, IETF RFC 2965
simple key-value pairs, information via HTTP headers
string (serialization)
4 kB all major
Local Shared Object (Flash cookie)
proprietary browser plug-in (Adobe)
alternative to cookies, accessible from JavaScript
Flash data types
100 kB per domain (can be increased)
all major via Adobe Flash Player 6+ plug-in
(Google) Gears open source browser plug-in (BSD License)
relational database (SQLite)
many unlimited per domain (SQLite limitations)
deprecated (old versions via Gears plug-in)
Web Storage Working Draft simple key-value pairs, no duplicate values for a key
string (serialization)
5-10 MB (can be increased)
IE 8+, Firefox 2.0/3.5+, Chrome 4/5+, Safari 4+, Opera 10.5+
Indexed Database API Working Draft indexed key-value pairs, duplicate values for a key, efficient searching over keys
many N/A IE 10+, Firefox 4+, Chrome 11+
Web SQL Database Working Group Note SQL queries (variant)
many 5 MB (can be increased)
“deprecated” Chrome 4+, Safari 3.1/4.0+, Opera 10.5+
30
![Page 31: Local Storage for Web Applications](https://reader033.vdocuments.net/reader033/viewer/2022061206/54825e76b4af9f690d8b4766/html5/thumbnails/31.jpg)
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