A Quick Refresher
sessionStorage is similar to localStorage, the main difference is that data in sessionStorage is cleared when the page session ends, while data in localStorage persists.
- A page session lasts as long as the browser is open, and survices over page reloads and restores.
- Each tab/window has its own
sessionStorage, even if they are opening the same URL. - Closing a tab/window ends the session and clears data in
sessionStorage. - Data stored in
sessionStorageis also origin seperated.
sessionStorage in iframes
Same site iframes
If you have an iframe embedded in a webpage and they are in the same domain, is the data in sessionStorage shared between the iframe and its parent document?
Let’s write the following code snippet to demonstrate.
In the example above, iframe.html and iframe2.html are embedded in index.html. We set one item on each html file seperately. We are using a timer to display all items available, now these items are accessible on both side.
So, we come to the conclusion that: data stored in sessionStorage is visible within a browser tab/window, including iframes from the same origin.
Cross Site iframes
Based on knowledge we have known, data in sessionStorage is not shared across origins. We can make a guess data stored in sessionStorage is not shared between a webpage and container iframes from another domain.
Let’s verify what we have guessed is correct or not.
In the example above, we put index.html in the domain https://descriptive-fluffy-nylon.glitch.me/, the two iframes files are hosted on a different origin https://dolomite-brainy-vermicelli.glitch.me/.
The parent webpage can only access the indexhtml item, which was set on the index.html. However, iframe.html and iframe2.html are sharing the same data because they are from the same origin.
conclusion: sessionStorage is bound to the origin, however it is shared between iframes in the same tab, if these iframes come from the same origin.