Web storage, consisting of sessionStorage and localStorage, is now very familiar.

Unlike cookies, which were difficult to handle, web storage clarifies its use as client-side storage and has already become our friend with better usability.

Local storage, frequently handled by frontend developers, can do the following:

• storage.length
• storage.key(n)
• value = storage.getItem(key)
• value = storage[key]
• storage.setItem(key, value)
• storage[key] = value
• storage.removeItem(key)
• delete storage[key]
• storage.clear()

The API is well-designed, so you can quickly understand how it works just by looking at the names.

But did you know?

That you can also attach events to storage?

This is the web storage event.

Why Use It?

According to the spec, you can receive the following as events:

• When an item is updated using setItem()
• When an item is deleted using removeItem()
• When everything is cleared using clear()

In other words, you can detect changes in local storage to perform specific tasks.

The event does not fire within the same tab or window where the change occurred; it only fires in other tabs or windows.

How to Use It?

Attaching the event is simple.

window.addEventListener('storage', () => {
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
});

window.onstorage = () => {
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
};

When we use local storage, we use the singleton object localStorage. So...

localStorage.addEventListener('storage', ...);

I thought using it by attaching the event directly to the instance like this would be more intuitive and easier to extend in the future. Hearing there was a storage event, I tried it like that without thinking much, but it didn't work. I suspect a few others might have tried the same. :)

The StorageEvent Object

Like other events, the storage event also receives an event object from which you can get information. The StorageEvent, which inherits from Event, has the following additional properties:

• key: The key that was changed.
• newValue: The new value.
• oldValue: The value before the change.
• storage: The storage object that was affected (localStorage or sessionStorage).
• url: The URL of the document whose storage changed.

You can use it in the handler just like a regular event object.

window.addEventListener('storage', (ev) => {
  console.log(ev.key);
});

localStorage.setItem('myData', 'data1');

// console output: 'myData'

Where to Use It?

The storage event seems like it can be applied in various ways.

UI elements frequently used during shopping, like a shopping cart, are likely to be open in multiple tabs. If the cart is emptied after ordering items, it seems easy to update the cart across all tabs. This would be better for UX than updating on entry or using polling.

If a user using a service in multiple tabs attempts to log out in one tab, you can use the event to implement simultaneous logout across other tabs. It seems LinkedIn uses this method.

In a similar vein, real-time synchronization between tabs could be implemented. Looked at this way, it could be used as an event-based message exchange tool between tabs.