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.

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