Maintaining state of an iFrame page in various browser windows/tabs through Javascript

Question

I have a page (say 'basepage') in which there is one iFrame. In this iFrame, there are various divs which are displayed and are made hidden based on some criterion at run-time. This criterion is nothing but AJAX call to some other external API through another page (say 'page2') . If the API returns (say 'x') value, div1 is displayed (rest are made hidden) and if it returns (say 'y') value, div2 is displayed (rest hidden) and so on.

The problem is, if I open just 1 browser window of basepage everything works fine but opening multiple windows/tabs of basepage does not reflect the value across all pages.

Consider the following steps:

1. Open basepage. Default settings are displayed.

2. Open page2. API gets called called and it returns 'x'. In basepage 'div1' block is displayed and rest are hidden.

3. Open basepage in another tab/window of same browser. Default settings are displayed while this should not occur. It should display div1 with rest hidden.

Hope I have made my problem clear enough for all you people to understand. This has to be done with help of javascript/jQuery only. Kindly help me out.

Thanks so much.

Answer 1

Well, after a day of struggle on Lord Google, I have come to know that I am actually looking for is ' WebStorage ' introduced in HTML5. Too bad this won't work for Old Browsers though but at least I am good to go further.

Thanks so much people for looking into this. :-)

Answer 2

In my projects I use window.name property to identify browser tabs. Guess it's a good point for you to start.