How to use Session Web storage in HTML5

Posted in HTML 5 | HTML 5 References on July 12, 2019

In this article, I will go to explain Session Web storage in HTML5.

Session Web Storage in HTML5

Session Storages an attribute of DOM defined in HTML5.
Session storage is per-page-per-window and is limited to the lifetime of the window.
Session Storage object does not persist cookies.
Session Storage is a simple map constructed with Key value pairs
Session Storage is global object in JavaScript, to be more specific it is a sub-object of window
Session Storages an object of type Storage that represents a storage space defined as an attribute of each window.
Session Storage is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.
Session Storage will be allow access data to any page from the same site opened in that window and as soon as you close the window, session would be lost.
Session Storage can store megabytes of values, the exact size depends on the browser implementation. For IE8 it is 10 MB.
HTML5 introduces the sessionStorage attribute which would be used by the sites to add data to the session storage

Properties of Session Storages

dataStore.setItem('key','value');

dataStore.getItem('key');

dataStore.removeItem('key')

dataStore.clear();

dataStore.length;

Example

Following example is the Session storage.

<!DOCTYPE HTML>

<html>

<body>

if (sessionStorage.hits)

{

sessionStorage.hits = Number(sessionStorage.hits) + 1;

}

else

{

sessionStorage.hits = 1;

}

document.write("Total Number of Hits :" + sessionStorage.hits);

</script>

<p>Refresh the page and count the total number of hits</p>

<p>Close the window and open it again and check the result.</p>

</body>

</html>

Output

session web storage.jpg