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.

1 Comment

  1. Carrie Underwood is my favourite US contry singer. She is young, beautiful and charming woman in her 30s. Her voice takes me away from all troubles of this planet so I start enjoy my life and listen songs created by her mind. Now she is on a Cry Pretty 360 Tour started in May of 2019. The concerts scheduled for this year, up to the 31st of October. Tickets are available for all men and women with different income. If you love contry music, then you must visit at least one of her concert. All tour dates are available at the Carrie Underwood tour Chicago. Open the website and make yourself familiar with all powerful Carrie Underwood concerts in 2019!

Leave a Reply

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