Javascript sessionStorage Across tabs? - javascript

I am using sessionStorage to ensure an action only happens once per session. However, if a user opens a new window - the sessionStorage is not carried over to the new window, and the action is executed again. See my code below:
if sessionStorage.alreadyTracked != "1"
sessionStorage.alreadyTracked = "1"
...
Is there an easy way to do this that applies to all tabs? Maybe I need to use a cookie?

As far as html5 storage goes i would go for localStorage in your case.
See below for the differences.
Session Storage:
Values persist only as long as the window or tab in which they
stored.
Values are only visible within the window or tab that
created them.
Local Storage:
Values persist window and browser lifetimes.
Values are shared across every window or tab running at the same origin.
Read more here

You probably want to switch to localStorage as sessionStorage is bound to individual tabs and localStorage is not.

If you're OK with targetting only FF/Chrome you might also want to take a look at the Broadcast Channel API
The Broadcast Channel API allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).

Related

Check if a page is already opened

Is there a reliable way to know if an other instance of the same page is already opened in the browser?
I’ve tried setting up a variable in local storage at load and unload but mobile browsers do not always send the unload event..
The context of JavaScript code is per opened page (called window). Therefore, there is no reliable way to track open pages unless you open a WebSocket connection to the server and check the number of open pages by associating a unique identifier to each of them and prevent opening multiple pages. If you want to take this approach, search for a WebSocket implementation of your server-side application.

Javascript. Check if there is no tab in focus

Now i'm using visibilitychange event to see which browser tab is active. I use active tab to watch some events on server side, and I don't want to run this watcher in all open tabs.
But now I want to run this watcher even if no tab is in focus, but still, in just one tab.
How to check if no tab is in focus and ensure that some script is running in only one background tab?
You have to solve the issue of communicating between tabs. There are several options:
Cookies
Local storage
Server side syncing (WebSockets, Ajax pooling, etc)
Each tab will have to update its state in the shared data centre (one of the above).
Once that is done, you should use a master selecting algorithm to decide which one of the tab should communicate with the server. In your case, this could be as simple as the first opened tab.
There are some quirks when using local storage such as two different sub-domains can't access the same local storage. Cookies are another way around where you can define parent domain as well. I would say the third option is the best in terms of debugging and adding more complex selection logic.

How can I use postMessage to share data between top level windows?

Using Web Messaging (postMessage), it's easy to send messages between windows including iframes and popup windows opened through Javascript. However, is it possible for two windows opened individually by the user to find each other and communicate?
As an example, if the user opens www.example.com/app.html in the browser, then the same page in another tab/windows of the same browser, I want the second window to know that it should act as a "child" of the first one and exchange a stream of events via postMessage. How do I detect the presence of another open window and how to I get a handle to it that I can use with postMessage?
i don't know if it's possible with postMessage.
but, it should be possible with localStorage or sessionStorage (which lives in the session scope).
using this approach you can write a value in one window/tab, and read it in the other window/tab, of course assuming that it's all on the same domain.
see more here: http://php-html.net/tutorials/html5-local-storage-guide/
hope that helps.

accessing other tab from one window

How does the browser treat multiple tab? Are they completely separate entity where no interaction is possible? I understand the sandbox concept of the browser and other security concerns but is it possible for a webpage to interact with another tab in the browser?
Basically my question is: If a user loads one webpage in a new tab, is there some way to access information of other tab which is already opened or will be opened after?
I have one concept of an application which needs to know about the other tab already opened or opened after my conceptual webpage but I don't know if this is possible.
As far as I know, this isn't possible. The browser wouldn't allow you to manipulate the browser's lower functions in a regular environment. It would ignore it or show a security error come up.
I think there is no way to do that, except when both documents are written to communicate with each other (Like in vBulletin new windows). The only way to access tabs is writing Add-Ons for the browser.
There is no way to access other tabs on the client-side.
However, I can imagine a scenario in which this could be done server side. Have the user log in to your site on both tabs and use something like sockets to pass data back and forth from one tab to the other using the server as a middle-man.
If both pages are from the same domain, you can use cookies or, in HTML5, local storage.
If you own the other tabs, you can broadcast to other tabs, and other tabs can broadcast back to your tab, creating a practical communication channel among them.
This is called Inter-window messaging, and it uses LocalStorage.
To simply check if you are the active tab, use $(window).blur( ... ), or a similar technique using a library of your choice.

ASP.Net SessionID keep retain while open new browser

I have a Javascript Expand/collapse Menu . When open New Window a session cookie is created to maintain the states of the menu(i.e, Expanded or Collapse).
1.If we open some node of menu.It maitain their states in cookie.
2.But when we open new browser window, then no new session made ,it get the pervious session,due to this, Menu still showes expanded.
3.But if we close all the browser then it is working fine,it creates new session in this case.
I need to open a second browser window or tab, but it must have a different SessionID. Opening the new browser window from an ASP.NET page is easy, but then it shares the same cookie and thus SessionID with the original.
How can I do this?
Thanks for help,
Jaydeep
As per my understanding you should not use session id for the logic of displaying menus in your form. Instead of this you can just use hidden field value or querystring value.
I need to open a second browser window or tab, but it must have a different SessionID
Sorry but this is impossible to achieve. That's how browsers work and you have no control over this behavior. Take for example gmail: you log into your account and then open another browser tab/window and you will still be logged in because cookies are shared between tabs/windows.
So you should use some other storage mechanism like url ids or hidden fields, and not cookies.
To get possibility to use different sessions in different browser tabs, You can use cookieless sessions. You can read about in MSDN.

Categories