HTML5 Storage
description
Transcript of HTML5 Storage
![Page 1: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/1.jpg)
HTML5 Storage
![Page 2: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/6.jpg)
Cookies not enough• More storage space
• On the client
• Beyond page refresh
• Not transmitted to server
![Page 7: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/7.jpg)
HistoryIE: 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
![Page 8: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/8.jpg)
HistoryAMASS (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
![Page 9: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/9.jpg)
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)
![Page 10: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/10.jpg)
Previous Storage Solutions• Either specific to single browser or relied on third party plug-in
• Different interfaces
• Different storage limitations
• Different user experiences
![Page 11: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/11.jpg)
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”
![Page 12: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/12.jpg)
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
IE8+
Firefox 3.5+
Safari 4.0+
Chrome 4.0+
Opera 10.5+
IPhone 2.0+
Android 2.0+
![Page 13: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/13.jpg)
Check for HTML5 Storagefunction supports_html5_storage() {
try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }
![Page 14: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/14.jpg)
if (Modernizr.localstorage) { // window.localStorage is available! } else { // no native support for HTML5 storage :( // maybe try dojox.storage or a third-party solution }
Or use Modernizr
![Page 15: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/15.jpg)
Using HTML5 Storage
![Page 16: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/16.jpg)
Using HTML5 Storage
localstorage object
setItem( )
getItem( )
removeItem( )
clear( )
![Page 17: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/17.jpg)
Using HTML5 StorageTracking changes to the HTML5 storage area
if (window.addEventListener) { window.addEventListener("storage", handle_storage, false);} else { window.attachEvent("onstorage", handle_storage);};
![Page 18: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/18.jpg)
Using HTML5 StorageTracking 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; }}
![Page 19: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/19.jpg)
Using HTML5 Storage
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
newValue any the new value, or null if an item was removed
url* string the page which called a method that triggered this change
StorageEvent Object
![Page 20: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/20.jpg)
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)
![Page 21: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/21.jpg)
HTML5 in action
![Page 22: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/22.jpg)
HTML5 in actionfunction 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;}
![Page 23: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/23.jpg)
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;}
![Page 24: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/24.jpg)
HTML5 in action• In the saveGameState() function, we did not worry about the
data type:
localStorage["halma.game.in.progress"] = gGameInProgress;
![Page 25: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/25.jpg)
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");
![Page 26: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/26.jpg)
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"]);
![Page 27: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/27.jpg)
HTML5 in actionBut 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"]);
![Page 28: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/28.jpg)
Beyond Key-Value Pairs: Competing Visions
![Page 29: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/29.jpg)
Beyond Key/Value Pairs: Competing Visions2007 – 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);});
![Page 30: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/30.jpg)
Beyond Key/Value Pairs: Competing Visions Web SQL Database
The Web SQL Database specification has been implemented by four browsers and platforms.
Safari 4.0+
Chrome 4.0+
Opera 10.5+
Mobile Safari 3.0+
Android 2.0+
![Page 31: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/31.jpg)
Beyond Key/Value Pairs: Competing VisionsSQL-92
Oracle SQL
Microsoft SQL
MySQL
PostgreSQL
SQLite SQL
![Page 32: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/32.jpg)
Beyond Key/Value Pairs: Competing Visions
Indexed Database API
Formerly known as WebSimpleDB
Now colloquially referred to as “indexedDB”
![Page 33: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/33.jpg)
Beyond Key/Value Pairs: Competing Visions
IndexedDBobject storeShares many concepts with a SQL database:
• Records (keys or attributes)• Fields (values)• Datatypes
But no query language!
![Page 34: HTML5 Storage](https://reader036.fdocuments.us/reader036/viewer/2022081512/56814e7e550346895dbc1af6/html5/thumbnails/34.jpg)
Beyond Key/Value Pairs: Competing Visions
Firefox 4: An early walk-through of IndexedDB
HTML5 Rocks: IndexedDB example