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