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

Thank You!

Questions? Comments? [email protected]

32