How to carry a unique identifier across multiple web pages

Question

I have created a simple website for my own use that consists of 3 static pages. Each page loads some data from a database (parse server) that allows me to either view or manipulate said data. This works great but now I want to expand it to select specific data based on an identifier ( dataid ).

Assuming I go to a landing page and then select (eg from a dropdown) the dataset, by name, I want to view/edit which gives the dataid , how do I use that dataid across any of the 3 pages I have?

I thought about using localStorage but that is common for a given domain/port and I may want multiple tabs open each showing a different set of data (different dataid ).

And I think sessionStorage is not the correct solution either since it only persists per tab and I'd like to be able to have multiple tabs open related to the same dataid .

I think it might be related to query strings but I am not sure how to use that across all pages. For example, assume from the landing page user selects dataid='dataset1' and the landing page opens main.html?dataset1 . But if main.html contains a link to edit.html how would I get it to open edit.html?dataset1 ? I have seen some solutions where all links on a page are modified using jQuery/javascript to append the query string; but this feels more like a workaround.

I know this is used all over the web but not sure how they achieve it. For example, I am sure I have seen things like:

somedomain.com/{dataid}/main.html
somedomain.com/{dataid}/edit.html

This feels like what I am looking for and means I have a user friendly url to a given dataset. Is this some sort of server side handling? If so, what technology is in use here?

I'd be interested in either a server side solution if that is the 'correct' way to do it and, short term, a client side solution (as I currently use neocities to serve my static pages).

Clarification of requirements:

1. For a given browser tab, be able to load any of the 3 pages with a specific dataid .
2. Be able to have multiple tabs open, each using their own dataid .
3. Any of the linked pages should continue with the current dataid . eg if main.html links to edit.html, then if user click on the link to edit.html (either open in current tab or new tab), then edit.html should continue with the same dataid .
4. Be able to link directly to a given dataid - eg main.html?dataset1 or similar (its OK if I need to add JS to extract the dataid before continuing).

A thought that I had is, perhaps some of this maybe easier/only possible with a single page web app??

Answer 1

in jquery:

function Navpage(){
    windows.location("pagename.aspx?Id="+Id);
}

//the Id must be the the one you've passed in data:({"Id":Id}) under ajax call. this function should execute onclick of a button.