CS2550 Dr. Brian Durney

SOURCES

�  JavaScript: The Definitive Guide, by David Flanagan

� Dive into HTML5, by Mark Pilgrim http://diveintohtml5.info/storage.html

WEB STORAGE BEFORE HTML5

� Cookies – sent to server possibly unencrypted, only 4K data

�  Internet Explorer – userData �  Flash – Local Shared Objects � Dojo Toolkit – dojox.storage � Google Gears

Except for cookies, all of these rely on third-party plugins or are only available in one browser. (Cookies have their own issues.)

WEB STORAGE

� Maps string keys to string values

� Can store “large (but not huge) amounts of data”

Provides persistent storage for web applications

tictactoe.com

Tic Tac Toe George Won: 3 Lost: 10

"playerName": "George" "won": "3" "lost": "10"

David Flanagan, JavaScript: The Definitive Guide p. 587

tictactoe.com

Tic Tac Toe George Won: 3 Lost: 10

PERSISTENT STORAGE

tictactoe.com

Tic Tac Toe George Won: 3 Lost: 10

Web app saves data in local storage

User quits browser User returns to site in same browser

tictactoe.com

Tic Tac Toe George Won: 3 Lost: 10

"playerName": "George" "won": "3" "lost": "10"

"playerName": "George" "won": "3" "lost": "10"

BROWSER SUPPORT

http://caniuse.com/#search=localStorage

caniuse.com screen capture from

20OC

T15

Web storage is supported by (virtually) all current browsers and a lot of older browsers.

USING LOCAL STORAGE LIKE AN OBJECT

"playerName": "George" "won": "3" "lost": "10"

localStorage.playerName = "George"; localStorage['won'] = 3; localStorage.lost = 10;

WRITE

var name = localStorage.playerName; alert(name); // ALERTS George READ

USING THE Storage API

"playerName": "George" "won": "3" "lost": "10"

localStorage.setItem("playerName", "George"); localStorage.setItem("won", 3); localStorage.setItem("lost", 10);

var name = localStorage.getItem("playerName"); alert(name); // ALERTS George

READ

WRITE

USING THE Storage API

"playerName": "George" "won": "3”

localStorage.removeItem("lost");

localStorage.clear(); alert(localStorage.length); // ALERTS 0

CLEAR

DELETE

Remove all keys and values

Remove specified key and associated value

Nothing left in the storage object

OBJECTS AND ARRAYS

var recordObj = {"lost": 10, "won": 3}; var recObjStr = JSON.stringify(recordObj); localStorage.record = recObjStr;

Use JSON.parse to convert a string to an object or array.

Use JSON.stringify to convert an object or array to a string.

Objects and arrays can’t be stored directly in local storage.

var recObjStr = localStorage.record; var recordObj = JSON.parse(recObjStr);

localStorage AND sessionStorage

� LIFETIME: permanent (until deleted)

� SCOPE: Document origin

� LIFETIME: Until window or tab is closed

� SCOPE: document origin, per window

HOW MUCH DATA?

“5 megabytes” is how much storage space each origin gets by default. This is surprisingly consistent across browsers, although it is phrased as no more than a suggestion in the HTML5 Storage specification.

--Mark Pilgrim

5 MB

http://diveintohtml5.info/storage.html

SECURITY AND PRIVACY

“Anything you save resides on the user’s hard disk in unencrypted form. Stored data is therefore accessible to curious users who share access to the computer and to malicious software (such as spyware) that exists on the computer. For this reason, no form of client-side storage should ever be used for passwords, financial account numbers, or other similarly sensitive information.”

--David Flanagan JavaScript: The Definitive Guide

BEYOND NAMED KEY-VALUE PAIRS

� Web SQL Database � IndexedDB

But there is more to life than “5 megabytes of named key/value pairs,” and the future of persistent local storage is… how shall I put it… well, there are competing visions.

--Mark Pilgrim http://diveintohtml5.info/storage.html

WEB SQL DATABASE

� Uses embedded SQLite database � Provides an executeSql method

While Web SQL Database is supported in Chrome, Safari & Opera, Firefox and IE are unlikely to support it any time soon (Mozilla is philosophically opposed).

www.html5rocks.com/en/features/storage

INDEXED DATABASE � Provides an object store � Database, records, fields, cursor,

transactions � No structured query language—use

object store methods instead

Indexed Database has an early implementation in Firefox 4.0 Beta and Chrome dev channel. There's a good chance all browsers will support it in the future, but that's not yet clear.

www.html5rocks.com/en/features/storage