CODEWITHSUNDEEP
javascriptangulariframesession-storage
JoellyR
JoellyR

Reputation: 153

Session Storage not reset when iFrame closed

The issue I am facing is when closing an iframe and opening another iframe with same destination again, the sessionStorage seems to be still populated from the last iframe I had opened. I expected that sessionstorage would be reset and start fresh once again.

I have my iframe in its own component which I display styled as a modal popup. When closing the modal I verified that the onDestroy function is getting called and it seems like the component is getting torn down and the iframe should be getting removed from the DOM.

I also tried specifically getting the iframe by id and removing it from the parentNode in the onDestroy function just incase it was not properly being removed, but this still did not make a difference.

I also tried using the beforeunload event and clearing the session storage before the page in the iframe closes... But when dismissing the dialog (component) which contains the iframe, it seems like the event is not being fired or the handler is not being triggered. Below is the code I use to handle the beforeunload event (angular):

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    console.log("unload event");
  }

Is there any way that I can force the session storage to be cleared when the iframe is closed? Is this a bug in the way that the sessionstorage is functioning or is this the expected behaviour when using sessionStorage?

Upvotes: 2

Views: 2251

Answers (3)

255kb - Mockoon
255kb - Mockoon

Reputation: 6974

According to the documentation, this is the expected behavior of sessionStorage. It is scoped to the browser tab/window, segregated by domains, and gets cleared when the browser or tab is closed. But an iframe is, by definition, not a browser tab nor a window while it may, indeed, point to a different domain. The "natural" way of cleaning it would be to close the browser / tab.

To do this programmatically, one solution would be to communicate to the iframe that the application modal is being closed through window.postMessage. Like this, the application loaded in the iframe could clean the storage by itself. But you may not be able to modify the code of the application in the iframe.

Another solution would be to serve the iframe application on the same domain as your main application through a reverse proxy. Storage would be then shared between the two applications and you should be able to clear it when your modal onDestroy method is called: 

onDestroy() {
  sessionStorage.clear();
}

Upvotes: 4

David Bradshaw
David Bradshaw

Reputation: 13075

How about clearing it when you load the page?

Upvotes: 0

Nate T
Nate T

Reputation: 785

Have you tried running 

window.sessionStorage.clear;

from inside your lifecycle onDestroy method?

Feel free to move this answer to comment if needed.

Upvotes: 1

Related Questions