Sharing sessionStorage data across browser tabs

 

In this post I’ll show you how to share html sessionStorage data across browser tabs in an angular web application. This is because by default data stored in sessionStorage exists only in a single tab (i.e the browser tab it was created in).

In most cases it is beneficial to have changes to sessionStorage be visible across all browser tabs (e.g. when a user logs in from one tab, he should be logged in to other tabs as well). Fortunately this can easily be solved using the approach I’ll be showing you in this post.

A little comparison of localStorage/sessionStorage and cookies

With modern web applications (e.g. Single Page Applications) the preferred means of storing client-side data is with html localStorage or sessionStorage. These two methods, referred to as HTML Web Storage have significant benefits over the older cookie based approach. For instance data stored in Web Storage is only kept at the client side, and it’s not automatically transmitted to the server with every request unlike with cookies. Also Web Storage offers much more storage capacity (at least 5MB) than cookies (4096 bytes) and does not have the “inconsistent deletion/persistent” quirks that cookies have. Web Storage Data is accessible for Pages from the same origin (i.e. domain and protocol).

In short Web Storage (localStorage or sessionStorage) is the way to go when creating modern web applications such as Angular, Vue, etc.

Limitations with sessionStorage

Whilst localStorage behaves as expected (i.e. stores data permanently that is persisted across browser sessions and across browser tabs), data stored in sessionStorage is available just to the tab that saved it. An example of a typical side effect of this is a user logs in to a site from one tab, and realizes they have to login again on every other tab they open. This is because the login information/ authentication token that is saved in one tab is not accessible from the other tabs. This in my opinion is undesirable in most cases.

The Solution

The solution to this is to instantly synchronize any changes to sessionStorage made on one tab to all other tabs, both already opened and new tabs. This synchronization needs to happen immediately to ensure no two tabs have different information. To achieve this I employ a wrapper class around localStorage and sessionStorage which I call storageManager. This storageManager class takes care of this synchronization and exposes a very nice API to use. So using this wrapper, saving data on the client side is as simple as this:

if (rememberMe)
    storageManager.savePermanentData('data', 'key'); // Saves to localStorage
else
    storageManager.saveSyncedSessionData('data', 'key'); // Saves to sessionStorage and sync with other tabs

A typical login scenario where if the user checks “remember me” the data is saved to permanent storage on disk, otherwise it’s only saved in the browser session and is lost when all tabs to the domain (or the browser) is closed.

• To save new data or modify an existing data, you simply decide how long the data should live and whether it should be accessible across other tabs. You do this by calling one of 3 saveData methods: saveSessionData, saveSyncedSessionData orsavePermanentData.
• To retrieve data you use var myData = storageManager.getData('key');
• To delete you use storageManager.deleteData('key');

The wrapper correctly handles saving to the right Web Storage location (i.e. localStorage or sessionStorage) depending on the operation being perform. The wrapper provides other convenient methods you can use to store and manipulate data on the client-side. See below for the full list.

The storage manager wrapper offers many conveniences to client-side data storage and manipulation. But the primary benefit is the synchronization of your data across multiple tabs; you don’t get this with the traditional sessionStorage implementation.

Below is the wrapper code:

This class is part of QuickApp (An Angular startup project template) and uses typescript, but the techniques employed are valid for plain JavaScript as well. Check the full project out on Github to see how it all fits together and see the working demo here. You can drop this file into your angular project without modification and it’ll work right out of the box.

Useful Methods

Below is a detailed list of convenient methods you get with this library:

• saveSessionData: Save data into a single tab. Stuff you save with this is not available in other tabs
• saveSyncedSessionData: Whatever you save with this function is available in all opened tabs. This is what you’ll use to save a user’s Authentication Token when the user chooses not to “Remember Me”
• savePermanentData: Whatever you save with this is permanently saved on disk and is available in all opened tabs. This is what you’ll use to save the Authentication token of a user who chooses to “Remember Me”
• moveDataToSessionStorage: Moves data that is in other storage locations (i.e. permanent storage, synced session storage) to session storage. In session storage each tab has its data independent of other tabs
• moveDataToSyncedSessionStorage: Moves data in other storage locations (i.e. permanent storage, session storage) to SyncedSessionStorage. Whatever is saved here is available in all opened tabs
• moveDataToPermanentStorage: Moves data in other storage locations (i.e. session storage, synced session storage) to permanent storage
• getData: Used to retrieve data from the data store
• getDataObject<T> : Used to retrieve data from the data store. This method returns an object of type T. Use this when you saved an object to the data store, to have it return the object back to you
• deleteData: Deletes data from the data store
• IMPORTANT! initialiseStorageSyncListener: This is the first thing you have to call before you use any functionality in this library. You can call this on Page Load. This hooks tab synchronization up
• deinitialiseStorageSyncListener : You don’t really have to call this method, but call this when you want to unhook tab synchronization for some reason

IMPORTANT: Call initialiseStorageSyncListener once to setup this library. This will hook up synchronizing your data between multiple opened browser tabs. One place to do this is when the page loads for the first time.

Extra utility methods. Note that using the core methods above is enough, you don’t have to call any of these yourself

• clearAllStorage: Clears everything in all data stores
• clearAllSessionsStorage: Clears all session storage in all opened browser tabs. Permanent storage is not affected
• clearInstanceSessionStorage: Clears all storage in the current browser tab only
• clearLocalStorage: Clear permanent storage only. Session storage are not affected

 

Hope this post helped you. Let me know in the comments what you think. Don’t forget to Share & Subscribe!