How to build a web site

zc2
zc2 used Ask the Experts™
on
What is the best practice to organize a web site such way it would keep its own session on each browser's tab? Is it even possible?
The problem, that the cookies are shared between the tabs and when the user refreshes a tab's content, the server is unable to determine which tab the request came from.
Having data and/or the session ID in the URL is not an option. Is there something in the latest web standards and API's which could be utilized ?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Embed a value in the page and use JavaScript to send that value back.

Author

Commented:
Send using what? A separate HTTP request? Make a TCP/IP connection? Something else?
 How to make that JS be executed when the user switches to another tab and refresh it by pressing F5? The server should know which tab is being refreshed, but JS did not have a chance to execute, since it's just a refresh.
Please explain in details.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Apologies I posted in haste as I had to go somewhere.

You can add an id to the URL.
Example
http://www.yourdomain.com?tab=123#tabid
This should still work with tabs but it gives a unique ID for what page your on

Cookies can be set by URL (folder) - so if your different browser tabs run off different folders then you can set the cookie by that.

What sort of URL structure are you using - absolute (points to actual resource) or rewritten - interpret with .htaccess or similar and redirect to another script?
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

Author

Commented:
Say, a tab shows a page by a url with tab=123 . Then the user focuses the address bar and presses Ctrl+Enter (Alt+Enter in some browsers) and a new tab opens. How the server would know its a new tab and the url param should be changed to tab=456 ?

No we don't use URL rewrite in the site inner logic, except for the landing pages, canonical and https redirects etc.

Author

Commented:
Basically, my question is: are there new technologies based and HTML5 and new web APIs which could help achieve that goal and I might not be aware of because they are new? If the answer is "No", that is acceptable.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014
Commented:
I'm pretty sure the answer is No.  This question in different forms comes up often.  The answer has always been the same.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The answer is no by default - I have a potential work around though - will try and post a bit later.

Author

Commented:
Julian Hansen, any additional input is surely appreciated.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The solution I am working on uses the window name as a unique identifier to identify the window to the remote script.

When the page loads it checks to see if a window.name exists - if not it creates one using a random key - it then calls the server by AJAX and registers the window.

The script then looks for a any form elements on the page or links and adds a parameter to the url (or in the case of forms a hidden input) with the unique identifier for the page.

This might work as proof of concept but might prove unwieldy for more complex pages. Preliminary tests seems to indicate it works in theory.

Having said that I get the feeling you are looking for a more packaged solution. The answer to your original question is No - there is no support for this in HTML5 - you need to add on using a technique like the one described above to be able to do what you want.

What you need to ask yourself though is why do you need this - what is the use case that will allow for multiple windows to the same URL need to act independently of each other.

Author

Commented:
Thank you for detailed explanation. Actually, we have implemented a similar solution, but we keep the tab id in the sessionStorage object instead. The solution is complex and bulky, so I'm dreaming to get rid of it and replace with something simplier.
The use case is - the client we do the web site for, explicitly stated that they want to be able to be logged in as different users in tabs, and it's not an option to use different browsers.
Question: you said after generation the tab's key the script adds a parameter to the URL. How to do that without refreshing the whole page? I see, some sites are able to, like google maps changes the url when the map is panned.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
var tabid = getTabIdUsingWhatEverProcessYouHaveForThis();
var url = window.location.href + "&tabid=" + tabid;
window.location = url;

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You would need to check for parameters first though and then decide whether to use ? or & for your new parameter
var url = window.location.href;
var c = (url.indexOf('?') == -1) ? '?' : '&';
url += c + "tabid=" + tabid;
window.location = url;

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
There is another option here - and that is to build your application as a Singple Page Application (SPA) using Angular (or React)

In this scenario you load the application into the page and then run everything with AJAX calls back to the server.

Session management can be done with JWT tokens that you code Angular to include in the header of each request sent to the server. This can be stored in session storage (as you are doing)

I have had a few queries from customers to have different users logged in on different tabs.

My first response is "Show me where you have seen this being done" - after which I suggest they use different browsers for the different users.

I always ask for an example of the functionality otherwise I become the guy who has to invent it.

Author

Commented:
I opened up the F12 inspector in Chrome and executed the following command in the console
window.location=location.href+"?aaa=bbbbb"
I clearly see the browser sends a request to the server for the new page and the whole page refreshes.

But when I open maps.google.com and pan the map I see the URL is changed, but the inspector shows no "Doc" type request were made, only XHR requests for new map data. How that could be achieved?

Should I open a new following up question on EE?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Take a look at history.pushState()
Example
var url = window.location.href + "?aaa=bbbb";
history.pushState({state: 'Whatever you want here - will be restored to state when page accessed'},'title - ignored by firefox', url)

Open in new window

Author

Commented:
Thank you very much!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial