Storage event not firing
StorageEvent is fired in different page with the same domain.
From MDN
The StorageEvent is fired whenever a change is made to the Storage object.
This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made。
As others in the answers noted, the storage
event only get picked up (by the listener) if the localStorage was changed in another browser's tab/window (of the same app), but not within the context of the current tab.
Detect storage changes in the current tab:
window.addEventListener('storage', console.log)
window.localStorage.setItem('test', '123')
window.dispatchEvent( new Event('storage') ) // <-----
A manual storage
event is dispatched.
This will effectively trigger the storage
event listener twice on other tabs/windows (of the same app), but in certain situations this shouldn't be a problem.