Transcript webStoragex

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 thirdparty plugins or are only available in one
browser. (Cookies have their own issues.)
WEB STORAGE
Provides persistent storage for web
applications
tictactoe.co
m
"playerName": "George"
"won": "3"
"lost": "10"
Tic Tac Toe
George
Won: 3
Lost: 10
Maps string keys to string
values
 Can store “large (but not
huge) amounts of data”

David Flanagan, JavaScript: The Definitive Guide p. 587
PERSISTENT STORAGE
Web app saves data
in local storage
User quits browser
User returns to site in
same browser
tictactoe.co
m
tictactoe.co
m
tictactoe.co
m
Tic Tac Toe
Tic Tac Toe
Tic Tac Toe
George
Won: 3
Lost: 10
George
Won: 3
Lost: 10
George
Won: 3
Lost: 10
"playerName": "George"
"won": "3"
"lost": "10"
"playerName": "George"
"won": "3"
"lost": "10"
BROWSER
SUPPORT
Web storage is supported by
(virtually) all current browsers
and a lot of older browsers.
caniuse.com screen capture from 20OCT15
http://caniuse.com/#search=localStorage
USING LOCAL STORAGE LIKE
AN OBJECT
localStorage.playerName = "George";
localStorage['won'] = 3;
localStorage.lost = 10;
WRITE
"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
DELETE
Remove specified key
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:
permanent (until
deleted)
 SCOPE:
Document origin
 LIFETIME:
Until
window or tab is
closed
 SCOPE:
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