HTML5 Web Storage is a way for web pages to store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually). Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers.

1. Web Storage
Presenter: Vinod Mohan

2. Presenter: Vinod MohanPresenter: Vinod Mohan
What is Web Storage?
Web storage and DOM storage (document object
model) are web application software methods and protocols
used for storing data in a web browser. Web storage
supports persistent data storage, similar to cookies but with
a greatly enhanced capacity and no information stored in
the HTTP request header.

3. Presenter: Vinod Mohan
Why Store Data in Web Browser
The main reason is practicality. JavaScript code running
on the browser does not necessarily need to send all
information to the server. There are several use cases:
●
You want to increase performance. You can cache data
client-side so it can be retrieved without additional server
requests.
●
You have a significant quantity of client-side-only data,
e.g. HTML strings or widget configuration settings.
●
You want you make your application work off-line.

4. Presenter: Vinod MohanPresenter: Vinod Mohan
What we are using now?
Cookies:- Cookies were invented early in the web’s history,
and indeed they can be used for persistent local storage of
small amounts of data.
Cookies are domain-specific chunks of data. They sound
tasty, but handling is awkward.

5. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
How Cookies work?
●
Server sends some data to the visitor's browser
in the form of cookie.
●
The browser stores the same as plain text record
on the visitor's hard drive.
●
Now, When the visitor arrive at the another page
on the same site, the browser sends the same
cookie to server for retrival.
●
Once retrived, your server knows/remembers
what was stores earlier

6. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
The Limitations of Cookies
●
Cookies are included with every HTTP request, thereby
sending data unencrypted over the internet(unless SSL
verified) and transmitting the same data over and over
●
Cookies have data limitations, about to 4KB per cookie
●
Most browers allowed limited number of cookies per
domain.
●
Privacy and Security issues

7. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
What we really want is?
●
Lot of storage space.
●
Data should persists beyond a page refresh.
●
Data should not be transmitted to server
●
On the Browser

8. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Introducing HTML5 Web Storage
HTML5 Web Storage is a way for web pages to store
named key/value pairs locally, within the client web
browser. Like cookies, this data persists even after you
navigate away from the web site, close your browser tab,
exit your browser, or what have you.

9. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Browser support

10. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Before HTML5
●
At first, Started in IE. Microsoft invented a great
many things, DHTML Behaviors(userData). UserData
allows 64 KB per domain.
●
In 2002, Adobe introduced flash cookies in flash
environment, properly known as Local Shared Object
allows upto 100 KB of data per domain.
●
Brad Neuberg developed an early prototype of a Flash
to-JavaScript bridge called AMASS (AJAX Massive
Storage System), but it was limited by some of Flash’s
design quirks.

11. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Before HTML5 continued
●
By 2006, with the advent of ExternalInterface in Flash 8,
accessing LSOs from JavaScript became an order of
magnitude easier and faster.
●
Brad rewrote AMASS and integrated it into the popular
Dojo Toolkit under the moniker dojox.storage. Flash
gives each domain 100 KB of storage “for free”.
●
In 2007, Google launched Gears, provided an API to an
embedded SQL database based on SQLite.

12. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Web Storage types
Web Storage comes in two flavours and both uses
the Key-value pair combination,
1. Local Storage,
Exists untill it is removed or expired and available
across multiple tabs
2. Session Storage,
Once the window or tab is closed, the data stored
is erased.

13. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Web Storage Strengths
●
The ease of use for developers: It has a simple AOI to
get and set key/value pairs and can do much more.
●
The amount of space provided: no less than 5 or 10 MB
per domain.
●
The LocalStorage object stores data with no expiration.
●
Clent- Side Access: Servers cannot directly write into
web storage.
●
Data transmission: Objects are not sent automatically
with each request but must be requested.

14. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Web Storage Weaknesses
●
Data is stored as a simple string.
●
It has default 5 MB limit; more storage can be allowed
by user if required.
●
It can be disabled by the user or systems administrator.
●
Storage can be slow with complex sets of data

15. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Web Storage APIs
●
setItem(Key, Value) – Adds an item to storage
●
getItem(Key) - Retrives an item from storage
●
removeItem(Key) – Removes an item from storage
●
Clear() - Removes all items from storage
●
key(n) - Returns the name of the key for the index
provided
●
Length - Number of key/value pairs in the storage list

16. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
How to check browser supports or not?
// is localStorage available?
if (typeof window.localStorage != "undefined") {
alert(“Storage is working.”);
} else {
alert(“Storage is not working.”)
}
You can download JS at http://modernizr.com/

17. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Working of setItem(key, value)
// is localStorage available?
if (typeof window.localStorage != "undefined") {
// Local storage
localStorage.setItem("hello", "Hello World!");
//Session storage
sessionStorage.setItem("hello", "Hello World!");
} else {
alert(“Storage is not working.”)
}

18. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Working of getItem(key)
// is localStorage available?
if (typeof window.localStorage != "undefined") {
// Local storage
var local = localStorage.getItem("hello");
alert(hello + “from Local Storage”);
//Session storage
var session = sessionStorage.setItem("hello");
alert(hello + “from Session Storage”);
} else {
alert(“Storage is not working.”)
}

19. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Working of removeItem(key)
// is localStorage available?
if (typeof window.localStorage != "undefined") {
// Local storage
localStorage.removeItem("hello");
//Session storage
sessionStorage.removeItem("hello");
} else {
alert(“Storage is not working.”)
}

20. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Working of clear, key & Length
//to clear all
localStorage.clear();
//to read all
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var data = localStorage[key];
console.log(data);
}

21. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Storage Event
●
When ever we store data in local storage, event is fired
in other windows/tabs
●
This event can be used to synchronice the data in
defferent tabs
Syntax:
window.addEventListener('storage', function(event) {
console.log('The value for '+event.key+' changes from
'+event.oldValue+' to '+event.newValue);
}) ;
Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Storage Event
●
When ever we store data in local storage, event is fired
in other windows/tabs
●
This event can be used to synchronice the data in
defferent tabs
Syntax:
window.addEventListener('storage', function(event) {
console.log('The value for '+event.key+' changes from
'+event.oldValue+' to '+event.newValue);
}) ;

22. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
References
Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
●
http://www.sitepoint.com/html5-web-storage
●
http://www.html5rocks.com/en/features/storage
●
http://diveintohtml5.info/storage.html
Examples:
●
http://www.ellipsetours.com/Demos/storage/
●
http://html5demos.com/storage

23. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan

24. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
Thank You
Email: vinodm@mindfiresolutions.com,
Skype: mfsi_vinodm,
Mob No: +91 – 9620453625.
Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan