8/12/2019 MSHTML5

1/15

8/12/2019 MSHTML5

2/15

HTML5 is simply a set of new features made

available for developing web applications,adding to the existing capabilities we find inHTML4.

It is particularly designed to improve thelanguage with much better support formultimedia and server communication,making a web developers job much easier

8/12/2019 MSHTML5

3/15

Features

8/12/2019 MSHTML5

4/15

HTML5 Web Store

Its often referred as Web Storage.

Web storage is nothing but client side storage.

Right now we are using cookies for the purpose of storing

objects locally in client machine (in browser).

8/12/2019 MSHTML5

5/15

Limitations of Cookies:-

Cookies can able to store only 4k of data. For each domain

browser will assign 4k of memory.

Each time browser has to send cookie along with HTTP

request, itsinefficient especially if you are using mobile device

with not a lot of bandwidth

8/12/2019 MSHTML5

6/15

Introduction to HTML5 Local Storage:-

A simple JavaScript API in the browser for storing Key value

pairs that are persistent and you are not limited to 4k of

memory.

HTML5 local storage makes it possible to store values in the

browser which can survive the browser session, just like

cookies.

8/12/2019 MSHTML5

7/15

8/12/2019 MSHTML5

8/15

Local storage is available in the browser to all windows with the same

origin (domain). Data stored in the local storage is also available after

the window has been closed.

Usage

The sessionStorage object and localStorage object are

accessed in the same way. It is only they life span and

visibility of the data stored that is different.

You can set properties on the sessionStorage and localStorage

object just like with a normal JavaScript object. Here is an

example:

8/12/2019 MSHTML5

9/15

sessionStorage.myProperty = "Hello World";

localStorage.myProperty = "Hello World";

You can only store strings in the session and local storage

properties. Nothing else. If you need to store JavaScript objects,

you will have to convert them to a JSON string first.

You delete a session or local storage property like this:

delete sessionStorage.myProperty;

delete localStorage.myProperty;

You can also use the following three methods to access properties

in the session or local storage:

sessionStorage.setItem ('propertyName', 'value');

sessionStorage.getItem ('propertyName');

8/12/2019 MSHTML5

10/15

sessionStorage.removeItem ('propertyName');

Iterating Keys in the Local Storage

You can iterate the keys (property names) of the key - value

pairs stored in the session or local storage, like this:

for(var i=0; i < sessionStorage.length; i++){

var propertyName = sessionStorage.key(i);

alert( i + " : " + propertyName + " = " +

sessionStorage.getItem(propertyName));

}

8/12/2019 MSHTML5

11/15

The sessionStorage.lengthproperty returns the number of

properties stored in the sessionStorage object.

Dealing with JSON

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage

localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage

var x = localStorage.getItem('testObject');

var obj=JSON.parse(retrievedObject);

8/12/2019 MSHTML5

12/15

Storage Events

The storage objects fire events which your application can

listen for. A storage event is fired when you insert, update or

delete a session or local storage property.

8/12/2019 MSHTML5

13/15

The storage event is only emitted in other browser windows

than the one that inserted, updated or deleted the session or

local storage objects.

Attaching a Storage Event Listener

Attaching an event listener to a storage object is done like this:

function onStorageEvent(storageEvent){alert("storage event");

}

8/12/2019 MSHTML5

14/15

window.addEventListener('storage', onStorageEvent, false);

The function onStorageEvent()is the event handler function.

The addEventListener()function call attaches the event handler

function to storage events.

The storageEvent event object passed to the event handler

function looks like this:

StorageEvent {

key; // name of the property set, changed etc.oldValue; // old value of property before change

newValue; // new value of property after change

8/12/2019 MSHTML5

15/15

url; // url of page that made the change

storageArea; // localStorage or sessionStorage,

// depending on where the change happened.}

You can access this storage event object from inside the event

handler function.