Photo by Chien Nguyen Minh on Unsplash

A Less-Known Thing About Session-Storage API

Explaining a scenario where session storage gets copied over from one tab to another

Background:

In this modern era of web-app development, the need for storage on client-side has increased and there are many types of storages available on client-side now with session storage being one of them. The session storage is best suitable for cases where data should only be confined to the tab that the app is running. But there is one case, where the session storage gets copied over from one tab to another tab which we will talk about in this article.

Session storage — Background:

From MDN docs:
The sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.

Features of session-storage:

1. The session storage is scoped at the browser-tab level; if we close the tab, the session storage for that tab instance is gone forever.
2. It is origin specific.
3. Different types of protocols with the same origin have different session storage.
4. Session storage survive with tab…