HTML5 web storage, a better local storage than cookies. Learn how web pages can store data locally within the user's browser.

1. Mindfire - Internal Training & Seminar 1
HTML5 Web Storage
[using HTML5 storage instead of cookies]
Jyotirmaya Dehury
Mindfire Solutions

2. Mindfire - Internal Training & Seminar 2
Agenda
● - A Brief on Cookies
● - How Cookies Work
● - The Limitations of Cookies
● - A Brief Introduction to HTML5 Web Storage
● - Web Storage Strengths
● - Web Storage Weaknesses
● - Web Storage APIs
● - Demo
● - Web Storage Events
● - Browser Support

3. Mindfire - Internal Training & Seminar 3
Cookie?
A cookie is a small piece of information or variable
that is stored on the visitor's computer.

4. Mindfire - Internal Training & Seminar 4
Cookie?
A cookie is a small piece of information or variable
that is stored on the visitor's computer.
They store this information to allow a site to provide a more
personalized experience in ways such as:
● Tracking User Preferences
●
Logged in Status / Last logged in
● Last page viewed
● Page view count
●
Track advertisements
● Retain state about a shopping cart

5. Mindfire - Internal Training & Seminar 5
How Cookies Work?
● Server sends some data to the visitor's browser in the
form of a cookie.
● The browser storesthe same as a plain text record on the
visitor's hard drive.
●
Now, when the visitor arrives at another page on the
same site, the browser sends the same cookie to the
server for retrieval.
● Once retrieved, your server knows/remembers what was
stored earlier.

6. Mindfire - Internal Training & Seminar 6
The Limitations of Cookies
● Cookies have data-capacity limitations. The data storage
limit of cookies in many web browsers is about 4 KB per
cookie.
● Most browsers allow limited no. of cookies per domain.
●
Cookies are always sent with every HTTP request
(usually even for images) resulting in more data being
sent to server.
● Privacy and Security issues.

7. Mindfire - Internal Training & Seminar 7
Introduction to HTML5 Web Storage
● HTML5 introduces Web Storage as an alternative to Cookies.
● This storage comes in two flavors: local storage and session
storage.
● LocalStorage: Key-Value pair
Exists until it is removed or expired, and available accross multiple
tabs.
● SessionStorage: Key-Value pair
Once the window or tab is closed, the information stored is erased.

8. Mindfire - Internal Training & Seminar 8
Web Storage Strengths
● The ease of use for developers: It has a simple API to get and set
key/value pairs and can do much more.
● The amount of space it provides: no less than 5 or 10 MB to be
stored per domain.
● Data transmission: Objects are not sent automatically with each
request but must be requested.
● Client side access: Servers cannot directly write to web storage
which provides some additional controls from client-side scripting.
● 'storage' event can be utilized.
● The localStorage object stores the data with no expiration date.

9. Mindfire - Internal Training & Seminar 9
Web Storage Weaknesses
● Data is stored as a simple string
● It has a default 5mb limit; more storage can be allowed by the user
if required.
● It can be disabled by the user or systems administrator
● Storage can be slow with complex sets of data

10. Mindfire - Internal Training & Seminar 10
Web Storage APIs
● localStorage.setItem(key, value) : Adds an item to storage
● localStorage.getItem(key) : Retrieves an item from storage
● localStorage.removeItem(key) : Removes an item from storage
● localStorage.clear() : Clears all records out of Storage
● localStorage.key(n) : Returns the name of the key for the index provided.
● localStorage.length : Number of key/value pairs in the storage list

11. Mindfire - Internal Training & Seminar 11
Web Storage Events
● Whenever we store data in localStorage, the storage event is fired
in other browser windows/tabs.
● If the user has the same site open in different tabs, this event can
be used to synchronize the data. (This was actually quite an issue
with cookies.)
window.addEventListener('storage', function(event) {
console.log ('The value for ' + event.key + ' was changed from' +
event.oldValue + ' to ' + event.newValue);
}, false);

12. Mindfire - Internal Training & Seminar 12
Browser Support

13. Mindfire - Internal Training & Seminar 13