If I have a page A, and it loads several iframes B,C,D,E,F. And in each iframe, there is javascript code that stores a key color
with value red
in local storage. Will all the iframes local storage collide or is each one independent? If it is not independent, is there a way to make it independent?
Thanks
According to the W3C:
Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
In other words, if the iframes all reside in the same domain, then they will share the same local storage instance.
One way to potentially avoid collisions would be to use the current page URL as a key into a local storage dictionary, something like:
localStorage.setItem(window.location.pathname + "_color", "red");