1 / 34

HTML5 Storage

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

tab
Download Presentation

HTML5 Storage

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Storage

  2. Why Local Storage? • Data accessed 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! • 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-partysolution }

  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

  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 • But in 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); });

  30. Beyond Key/Value Pairs: Competing Visions Web SQL Database The Web SQL Database specification has been implemented by four browsers and platforms.

  31. Beyond Key/Value Pairs: Competing Visions SQL-92 Oracle SQL Microsoft SQL MySQL PostgreSQL SQLiteSQL

  32. Beyond Key/Value Pairs: Competing Visions Indexed Database API Formerly known as WebSimpleDB Now colloquially referred to as “indexedDB”

  33. Beyond Key/Value Pairs: Competing Visions IndexedDB object store Shares many concepts with a SQL database: • Records (keys or attributes) • Fields (values) • Datatypes But no query language!

  34. Beyond Key/Value Pairs: Competing Visions Firefox 4: An early walk-through of IndexedDB HTML5 Rocks: IndexedDB example

More Related