CS2550 Dr. Brian Durney

SOURCES  JavaScript: The Definitive Guide, by David Flanagan  Dive into HTML5, by Mark Pilgrim

BEFORE HTML5 WEB STORAGE  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.co m Tic Tac Toe George Won: 3 Lost: 10 "playerName": "George" "won": "3" "lost": "10" David Flanagan, JavaScript: The Definitive Guide p. 587

tictactoe.co m Tic Tac Toe George Won: 3 Lost: 10 PERSISTENT STORAGE tictactoe.co m Tic Tac Toe George Won: 3 Lost: 10 Web app saves data in local storage User quits browserUser returns to site in same browser tictactoe.co m Tic Tac Toe George Won: 3 Lost: 10 "playerName": "George" "won": "3" "lost": "10" "playerName": "George" "won": "3" "lost": "10"

BROWSER SUPPORT caniuse.com screen capture from 20OCT15 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

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

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).

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.