Web Storage concepts and usage

What is Web Storage

Web storage is known as DOM(Document Object Model) storage. It provides web application software method and protocols used for storing data in a web browser similar to cookies. But it has greatly enhanced capacity and no information stored in the HTTP request header.

Web storage limit is far larger and information is never transferred to the server.

Web storage is per origin (per domain and protocol).

Most of the all browser and its latest version support web storage.

Web storage types

There are two types of web storage. Both are differ in scope and life time.

  • sessionStorage – Data place in local storage is per origin and persists after the browser is closed.
// Store value on browser for duration of the session
sessionStorage.setItem('key', 'value');

// Retrieve value (gets deleted when browser is closed and re-opened) ...
console.log(sessionStorage.getItem('key'));
  • localStorage – Session storage is per origin-per-window-or-per-tab and is limited to the lifetime of the window/tab.
// Store value on the browser beyond the duration of the session
localStorage.setItem('key', 'value');

// Retrieve value (persists even after closing and re-opening the browser)
console.log(localStorage.getItem('key'));

Like to mention one interesting things. That is storage event.

The storage event is fired on a document’s Window object when a storage area changes.

// storage event which is ready to trigger if any storage area is changes
window.addEventListener('storage', function (event) {
  if (event.key === 'key') {
   console.log('Changes made on key : ', key);
  }
});

In the beginning of the first phase – I am going to write one story. So that we can get some basic idea. And I hope that we can able to think before providing any solution. In later when I get change then I will write more stories.

Story 1:  I have open multiple windows and tabs for same web app. How will I redirect login page for all opened windows and tabs when I logout from a window/tab?

This is a simple problem. Actually there are lots of way and tactics for solving any problem. We need to think which is the best solution for our particular problem. So no hardcoded.

We assume that we have a index.js file and which is included most of the all pages. if so, then we will add storage event  in this file as follows:

// storage event which is ready to trigger if any storage area is changes
window.addEventListener('storage', function (event) {
  if (event.key === 'logout') {
   window.location = '/login'; // this will redirect login page 
  }
});

And we need to call the following code when we are going to logout:

localStorage.setItem('logout', 'user-logout' + Math.random());

That’s it our solution. When we change local storage data then storage event will trigger in all open windows/ tabs. And we check if the key is logout the redirect to login page.

 

For more detail about web storage click here

You May Also Like

About the Author: Md. Delwar Hossain

He has 11 years of experience in developing standalone software and web applications for multiple database platforms. He has been passionate about new tools and technologies. He is positive and trustworthy. He is capable to learn and adapt quickly to different situations. He is a great team player and enjoys leading and mentoring. He is specialized in architecting and building complex web and mobile application. He has strong skills to automate POS, inventory, supply chain, trading export/ import, human resource management, manufacturing and production, distribution management system and hospital management system.

Leave a Reply

Your email address will not be published. Required fields are marked *