React to localStorage changes in the context of another document
“Back/forward cache” by Philip Walton triggered my curiosity to explore more obscure events of the window
object. One of them that caught my attention is storage
that gets fired on every localStorage
update that happens in the context of a different document. Have a look at this example.
window.addEventListener("storage", (e) => {
const { key, newValue } = e;
console.log(`Updated value:`, { [key]: newValue });
});

Looking at the HTML specification that this event fires “when the corresponding localStorage
or sessionStorage
storage areas change”. This confused me a little, as I managed to successfully implement it only for localStorage
modification. If you know what’s going on, let me know in the comments section below or ping me on Twitter, please.
Stay curious and share knowledge. Until next time 👋