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

1. Local Storage for Web
Applications
T-111.5502 Seminar on Media Technology B P (4-8 cr)
Presentation
Markku 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, 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?
markku.laine@aalto.fi
32