How can I create a dynamic product page using HTML, CSS, and Javascript

Question

I currently only know javascript. But the thing is I looked up how to do it and some people talk about something called localStorage. I have tried this and for some reason when I jump to a new page those variables aren't kept. Maybe I am doing something wrong? I jump to a new page via

and all I want do do is select a certain image. take that image to a new page and add it to that page.

I tried using the localStorage variables and even turning it into JSON.stringify and doing JSON.parse when trying to call the localstorage to another script. It didn't seem to work for me. Is there another solution?

This is some of my code. There are two scripts.

   document.querySelectorAll(".card").forEach(item => {
    item.addEventListener("click", onProductClick);
})


var div;
var productImg;
var ratingElement;
var reviewCount;
var price;



function onProductClick(){
    
// This took a week to find out (this.id)
    // console.log(this.id);

    div = document.getElementById(this.id);
    productImg = div.getElementsByTagName('img')[0];
    ratingElement = div.getElementsByTagName('a')[2];
    reviewCount = div.getElementsByTagName('a')[3]
    price = div.getElementsByTagName('a')[4];

    console.log(div.getElementsByTagName('a')[4]);

    var productData = [div, productImg,ratingElement,reviewCount,price];

    window.localStorage.setItem("price", JSON.stringify(price));

}

function TranslateProduct(){
    console.log("Hello");
}

This is script 2

var productPageImage = document.getElementById("product-image");

var myData = localStorage['productdata-local'];


var value =JSON.parse(window.localStorage.getItem('price'));
console.log(value);
// function setProductPage(img){
//     if(productImg != null){
//         return;
//     }

//     console.log(window.price);
// }

To explain my thought process on this code in the first script I have multiple images that have event listeners for a click. I wanted to Click any given image and grab all the data about it and the product. Then I wanted to move that to another script (script 2) and add it to a dynamic second page. yet I print my variables and they work on the first script and somehow don't on the second. This is my code. in the meantime I will look into cookies Thank you!

Answer 1

Have you tried Cookies

You can always use cookies, but you may run into their limitations. These days, cookies are not the best choice, even though they have the ability to preserve data even longer than the current window session.

or you can make a GET request to the other page by attaching your serialized object to the URL as follows:

http://www.app.com/second.xyz?MyObject=SerializedData

That other page can then easily parse its URL and deserialize data using JavaScript.

you can check this answer for more details Pass javascript object from one page to other