How to keep browser tabs independent in PHP

Question

Having read a load of posts related to what I want to do, I'm pretty certain it is impossible but I'll ask the question anyway in the hopes that someone might have solved this problem before or can point me in the right direction to a solution.

I have a complex PHP/MySQL web application where I wish to keep browser tabs/windows independent. e.g. the user can run a search on the database in one tab and another search in another tab and various parameters set up and stored as the searches are conducted are linked only to the relevant browser tab. Reloading a tab or moving further through the search (a paging system limits the number of results stored) does not interfere with the other search tab and uses the parameters identified with the current tab only.

My idea is to store search and other parameters to do with the browser tab in a database table keyed by some unique identifier tied to the tab.

I cannot use PHP sessions as these are common across the tabs. PHP, being server-side, does not know from which tab/window a request comes from. Cookies, like sessions, are common across tabs.

The solution for keeping track of different tabs/windows appears to be javascript's sessionStorage which at first sight seems ideal – I can set a js session vaiable that is unique to the browser tab and echo it back to the PHP script and, in each tab, I can set and keep an independent value. Yet, I need to assign that js session value to a PHP variable and this needs to be available before the search part of the PHP script runs. There is no interaction on the part of the user (i.e. no form submit etc.) other than loading a URL.

I've come across solutions suggesting AJAX/JQuery but these all require a form and some type of user interaction after the PHP script has run and most examples I've seen write to the innerHtml of a div. None of this accomplishes what I want.

Lately, I've been toying with the idea of parsing each page of my application through a gateway URL that simply loads a javascript script that creates the js session (if not already created) and then redirects to the actual PHP script with the unique identifier as part of the querystring. But this seems to involve unnecessary overhead.

Any suggestions or even solutions would be gratefully accepted.

–––>

In response to ADyson (as the comment box is too short):

The application is here: https://testdrive.wikindx.com/

It's for academics/research students to manage references. They all work in different ways including some liking to open multiple tabs to do different searches and there's the problem. Each search, for example, produces results that are displayed back on the web page but also other information such as the search parameters (for reference). The paging system (i.e. displaying e.g. 10 results/page) is designed so that going to the next page utilizes a quicker and more efficient SQL call – all the heavy work being done on the initial search. Search parameters and summary results/totals are done on this first call and these must be saved somewhere as well as the core SQL subqueries. Basically, there are data that are common across different pages of the search that must be stored somewhere and that are unique to that search in that browser tab.

Answer 1

Something needs to be unique about the URL of the tabs. The internet is stateless and so the browser doesn't know after a refresh whether it's tab one or tab two unless the url tells it so.

If you had an identifier in the tab url, such as a number or hash, you could then use that to save and return specific information from the session:

$_SESSION['tabs'][0] etc

So launching new tabs / searches would require you to either track and increment the tab ID for the user:

$tabID = sizeof($_SESSION['tabs']); or use some random hash generator.

You've mentioned using ajax which is also a possible option. With this you could store the identifier in the hash of the url #tab-1 and otherwise use the same url. You'd then need to use javascript to grab the identifier from the tab's hash and send a request including that via ajax to ask the server (PHP) to generate you the specific search results / page which matches it and you can then use to populate the page with.

Answer 2

Here's my solution. It uses javascript to check for the existence of a unique ID for the tab/window and sessionStorage to store that unique ID. I haven't yet tested that my application still works if a user has an old browser that does not use sessionStorage – this currently works in Firefox, Safari, and Chrome.

The business end of my index.php. The javascript is the second thing run once some basic environment configuration has been done (which is where WIKINDX_URL_BASE etc. comes from):

/**
  * Generate/return the unique browser tab/window identifier
  */
$script = WIKINDX_URL_BASE . '/gatekeeper.js?ver=' . WIKINDX_PUBLIC_VERSION;
$qs = $_SERVER['QUERY_STRING'] ? '?' . $_SERVER['QUERY_STRING'] : FALSE;
$url = WIKINDX_URL_BASE . '/index.php' . $qs;
if (!array_key_exists('browserTabID', $_GET)) {
// go into gatekeeper for a redirect and addition of a browserTabID to the querystring
print <<< END
<script src="$script"></script>
<script>redirectSet("$url", "$qs")</script>
END;
}
else {
// go into gatekeeper to check if browserTabID is unique to the tab (perhaps user has `opened link with browserTabID in a new tab/window)`
$id = $_GET['browserTabID'];
print <<< END
<script src="$script"></script>
<script>getBrowserTabID("$url", "$qs", "$id")</script>
END;
}

And my gateway.js:

// gatekeeper.js
/**
 * No browserTabID yet set so generate one and redirect
 */
function redirectSet(url, qs)
{
    var browserTabID;
    if ((sessionStorage.getItem('browserTabID') == null) || !sessionStorage.getItem('browserTabID')) {
        browserTabID = uuidv4();
        sessionStorage.setItem('browserTabID', browserTabID);
    } else { // This shouldn't be necessary but is here for completeness. Perhaps of use in the future . . .
        browserTabID = sessionStorage.getItem('browserTabID');
    }
    if (qs) {
        url = url + '&browserTabID=' + browserTabID;
    } else {
        url = url + '?browserTabID=' + browserTabID;
    }
    window.location.href = url;
}

/**
 * browserTabID in the URL. 
 * If the same as the session, URL is opened in existing tab/window so return doing nothing.
 * If not the same as the session (session is null probably), URL is opened in a new tab/window so generate browserTabID and redirect
 */
function getBrowserTabID(url, qs, browserTabID)
{
    if (browserTabID == sessionStorage.getItem('browserTabID')) { // Continuing in same tab/window
        return;
    }
// User has opened a link in a new tab/window – generate a new ID
    browserTabID = uuidv4();
    sessionStorage.setItem('browserTabID', browserTabID);
    if (qs) {
        url = url + '&browserTabID=' + browserTabID;
    } else {
        url = url + '?browserTabID=' + browserTabID;
    }
    window.location.href = url;
}

/**
 * Code from https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
*/
function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

After the code has run in index.php, I then have access to $_GET['browserTabID'] which I can then use to access a database table row.

Mark