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 👋