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

Provides persistent storage for web applications "playerName": "George" tictactoe.com "won": "3" "lost": "10" Tic Tac Toe George ž Won: 3 Maps string keys to string Lost: 10 values ž Can store “large (but not huge) amounts of data”

David Flanagan, JavaScript: The Definitive Guide p. 587 PERSISTENT STORAGE

Web app saves data User quits browser User returns to site in in local storage same browser tictactoe.com tictactoe.com tictactoe.com

Tic Tac Toe Tic Tac Toe Tic Tac Toe George George George Won: 3 Won: 3 Won: 3 Lost: 10 Lost: 10 Lost: 10

"playerName": "George" "playerName": "George" "won": "3" "won": "3" "lost": "10" "lost": "10" BROWSER Web storage is supported by (virtually) all current browsers SUPPORT and a lot of older browsers. caniuse.com screen capture from 20OCT15 from 20OCT15 capture screen

http://caniuse.com/#search=localStorage USING LOCAL STORAGE LIKE AN OBJECT

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

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

var name = localStorage.playerName; alert(name); // ALERTS George READ USING THE Storage API

WRITE

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

"playerName": "George" "won": "3" "lost": "10" READ var name = localStorage.getItem("playerName"); alert(name); // ALERTS George USING THE Storage API

Remove specified key DELETE and associated value

localStorage.removeItem("lost");

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

CLEAR Remove all keys and values localStorage.clear(); alert(localStorage.length); // ALERTS 0

Nothing left in the storage object OBJECTS AND ARRAYS Objects and arrays can’t be stored directly in local storage.

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

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. var recObjStr = localStorage.record; var recordObj = JSON.parse(recObjStr); localStorage AND sessionStorage

ž LIFETIME: ž LIFETIME: Until permanent (until window or tab is deleted) closed

ž SCOPE: ž SCOPE: Document origin document origin, per window HOW MUCH DATA? 5 MB “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 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 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 ž IndexedDB 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