Html, Javascript with node js passing variable

Question

So I am programming a backend with a node js that gives me data on video games. Now I've gotten a search page working that delivers a few results but the next step would be to be able to click on one of the results and have it go to a specific page for that game.

function ok() {
   let search = input.value;
    fetch("http://localhost:3000/search?search=" + search, {})
        .then((response) => {
            return response.json();
        })
        .then((response) => {
            for(let n = 0; n < response.length; n++){help[n] = response[n]["name"];}
            fetch("http://localhost:3000/cover?search=" + response[0]["id"],{})
                .then((response)=>{
                    return response.json();
                })
                .then((response)=> {
                    name1.innerText = "\n" + help[0];
                    img1.src = response[0]["url"];
                 });
            fetch("http://localhost:3000/cover?search=" + response[1]["id"],{})
                .then((response)=>{
                    return response.json();
                })
                .then((response)=> {
                    name2.innerText = "\n" + help[1];
                    img2.src = response[0]["url"];
                });
            fetch("http://localhost:3000/cover?search=" + response[2]["id"],{})
                .then((response)=>{
                    return response.json();
                })
                .then((response)=> {
                    name3.innerText = "\n" + help[2];
                    img3.src = response[0]["url"];
                });
            fetch("http://localhost:3000/cover?search=" + response[3]["id"],{})
                .then((response)=>{
                    return response.json();
                })
                .then((response)=> {
                    name4.innerText = "\n" + help[3];
                    img4.src = response[0]["url"];
                })
        })
}

Here I am just grabbing the data from my API, this works fine but the problem I have is that I've got an onclick event on the images to take me to a new html file with a new javascript file. This also works but I need some of the variables from this first javascript file so I can access the specific data on the game I clicked on in the new javascript file. For example if I click on img one I get send to the new html file but in the new javascript file I would need the help variable to access the name of the game that was clicked.

Answer 1

There are several ways to accomplish this but one simple way would be to user the browser's localStorage. Just save whatever information you need on the click event and it will still be there when the next page gets rendered, as long as the next page is still within the same domain.

localStorage.setItem("game", event.target.innerText);

Then on the next page just retrieve the value using:

var nameOfGame = localStorage.getItem("game");