HTML 5 Storage - Esti Livingston

1 .HTML5 Storage 

2 .Why Local Storage?  Dataaccessed over the internet can never be as fast as accessing data locally  Data accessed over internet not secure  HTML5 storage is on client 

3 .Persistent Local Storage • Native client applications use operating system to store data such as preferences or runtime state • Stored in registry, INI files, XML or other places using key/value pairs • Web applications can’t do this 

4 .Cookies • Invented early in Web’s history as a way to store persistent data (“magic cookies”) • Small pieces of information about a user stored by Web server as text files on user’s computer • Can be temporary or persistent 

5 .Cookies • Included with every HTTP request – slows down application by transmitting same information repeatedly • Sends unencrypted data over internet with every HTTP request • Limited to 4KB data • Example: filling out a text form field 

6 .Cookies not enough • More storage space • On the client • Beyond page refresh • Not transmitted to server 

7 .History IE: DHTML Behaviors • userData behavior allowed 64K per domain • Hierarchical XML-based structure Adobe Flash (2002) • “Flash cookies” or Local Shared Objects • Allows Flash objects to store 100K data per domain temporarily 

8 .History AMASS (AJAX Massive Storage System) • Brad Neuberg • Flash-to-JavaScript bridge • Limited by Flash design quirks Flash 8: ExternalInterface (2006) • Easier to access Local Shared Objects AMASS rewritten • Integrated into Dojo Toolkit: dojox.storage • 100KB storage • Prompts user for exponentially increased storage 

9 .History Google: Gears (2007) • Open source browser plug-in • Provides additional capability in browsers (geolocation API in IE) • API to embedded SQL database • Unlimited data per domain in SQL database tables By 2009 dojox.storage could auto-detect and provide unified interface for Flash, Gears, Adobe AIR and early prototype of HTML5 storage (in older version of Firefox) 

10 .Previous Storage Solutions • Either specific to single browser or relied on third party plug-in • Different interfaces • Different storage limitations • Different user experiences 

11 .HTML5 Storage • Provides standardized API • Implemented natively • Consistent across browsers • HTML5 storage is a specification named “Web Storage” • Previously part of HTML5 specifications • Split into its own specification • Different browsers may call it “Local Storage” or “DOM Storage” 

12 .Web Application Support • Supported by latest version of all browsers! IE Firefox Safari Chrome Opera IPhone Android 8+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+ • Access through localStorage object on global window object • Before using, detect whether browser supports it 

13 .Check for HTML5 Storage function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } 

14 .Or use Modernizr if (Modernizr.localstorage) { // window.localStorage is available! } else { // no native support for HTML5 storage :( // maybe try dojox.storage or a third-party solution } 

15 .Using HTML5 Storage 

16 .Using HTML5 Storage localstorage object setItem( ) getItem( ) removeItem( ) clear( ) 

17 .Using HTML5 Storage Tracking changes to the HTML5 storage area if (window.addEventListener) { window.addEventListener("storage", handle_storage, false); } else { window.attachEvent("onstorage", handle_storage); }; 

18 .Using HTML5 Storage Tracking changes to the HTML5 storage area The handle_storage callback function will be called with a StorageEvent object, except in Internet Explorer where the event object is stored in window.event. function handle_storage(e) { if (!e) { e = window.event; } } 

19 .Using HTML5 Storage StorageEvent Object PROPERTY TYPE DESCRIPTION key string the named key that was added, removed, or modified oldValue any the previous value (now overwritten), or null if a new item was added new Value any the new value, or null if an item was removed url* string the page which called a method that triggered this change 

20 .Using HTML5 Storage • Limitations in current browsers: • 5 MB of storage from each origin. • Can not ask user for more storage (except for Opera, sort of) 

21 .HTML5 in action 

22 .HTML5 in action function saveGameState() { if (!supportsLocalStorage()) { return false; } localStorage["halma.game.in.progress"] = gGameInProgress; for (var i = 0; i < kNumPieces; i++) { localStorage["halma.piece." + i + ".row"] = gPieces[i].row; localStorage["halma.piece." + i + ".column"] = gPieces[i].column; } localStorage["halma.selectedpiece"] = gSelectedPieceIndex; localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved; localStorage["halma.movecount"] = gMoveCount; return true; } 

23 .function resumeGame() { if (!supportsLocalStorage()) { return false; } gGameInProgress = (localStorage["halma.game.in.progress"] == "true"); if (!gGameInProgress) { return false; } gPieces = new Array(kNumPieces); for (var i = 0; i < kNumPieces; i++) { var row = parseInt(localStorage["halma.piece." + i + ".row"]); var column = parseInt(localStorage["halma.piece." + i + ".column"]); gPieces[i] = new Cell(row, column); } gNumPieces = kNumPieces; gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]); gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true"; gMoveCount = parseInt(localStorage["halma.movecount"]); drawBoard(); return true; } 

24 .HTML5 in action • In the saveGameState() function, we did not worry about the data type: localStorage["halma.game.in.progress"] = gGameInProgress; 

25 .HTML5 in action • But in the resumeGame() function, we need to treat the value we got from the local storage area as a string and manually construct the proper Boolean value ourselves: gGameInProgress = (localStorage["halma.game.in.progress"] == "true"); 

26 .HTML5 in action • Similarly, the number of moves is stored in gMoveCount as an integer. In the saveGameState() function, we just stored it: gMoveCount = parseInt(localStorage["halma.movecount"]); 

27 .HTML5 in action  Butin the resumeGame() function, we need to coerce the value to an integer, using the parseInt() function built into JavaScript:  gMoveCount = parseInt(localStorage["halma.movecount"]); 

28 .Beyond Key-Value Pairs: Competing Visions 

29 .Beyond Key/Value Pairs: Competing Visions 2007 – Google Gears (based on SQLite) -> Web SQL Database openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); });