0

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 (e.g. 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. e.g. 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 - e.g. 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??

SimpleOne
  • 1,066
  • 3
  • 12
  • 29
  • Multiple pages on the same server share their host and port so localStorage it is. As for SEO urls, those are handled depending on the server. With apache for instance you can rewrite `somedomain.com/main/{dataid}` into `somedomain.com/index.php?page=main&dataid={dataid}` then use PHP's $_GET to read the two parameters –  Aug 09 '22 at 09:17
  • 1
    Duplicate: [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) –  Aug 09 '22 at 09:20
  • @ChrisG But, per the comment in the question, if I use localStorage, then how would I have multiple tabs showing different datasets? If I have 2 tabs open, they will share the same localStorage since they are from the same host/port, correct? Which means I cannot store a unique `dataid` to use in each tab. Equally, what would happen if I click on `edit.html` with 'open in new tab' option? I need to be able to open `edit.html` for the current `dataid`. – SimpleOne Aug 09 '22 at 09:32
  • You asked how to use a dataid across three pages. The answer is localStorage. Now you say you want to store individual ids, one per tab. The answer to that, as per your own question, is sessionStorage (although I'm not sure that's true). Please clarify exactly what you want to do. –  Aug 09 '22 at 09:36
  • But I did state that I would like to have both ("use that dataid across any of the 3 pages I have" and "I may want multiple tabs open each showing a different set of data (different dataid)"). – SimpleOne Aug 09 '22 at 09:40
  • Ok, so you're navigating between three pages in a tab, and each tab should persist its own dataid? The safest options seems to be a URL parameter. –  Aug 09 '22 at 09:42
  • I've updated the question to hopefully clarify the requirements. – SimpleOne Aug 09 '22 at 09:51
  • Yes, if you use a SPA you can simply retain the id in a JS variable (since you never navigate away from the current page, only replace part of the currently loaded page). –  Aug 09 '22 at 09:53
  • However `sessionStorage` seems to be exactly what you need: https://stackoverflow.com/questions/44667607/browser-tab-storage (actual dupe) –  Aug 09 '22 at 09:54
  • The fact that you might want multiple tabs with the same id does not count against using sessionStorage since how to solve this is an (easy) problem independent of which type of storage you use –  Aug 09 '22 at 09:57
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247147/discussion-between-simpleone-and-chrisg). – SimpleOne Aug 09 '22 at 10:49

1 Answers1

0

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.

Avijeet
  • 1
  • 1
  • This is not jQuery, OP isn't using asp.net and there's no ajax involved with this question –  Aug 09 '22 at 09:41