0

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!

Gipjonat
  • 9
  • 2
  • It may be because local storage is asynchronous. Also, It might not be the correct answer. Please provide some code so that I can find the cause of this issue. – Jagroop Dec 03 '22 at 10:51
  • [^](https://stackoverflow.com/questions/74665951/how-can-i-create-a-dynamic-product-page-using-html-css-and-javascript#comment131789034_74665951) "_It may be because local storage is asynchronous_": No, [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) methods are synchronous. – jsejcksn Dec 03 '22 at 11:01
  • 1
    Can you show us the (exact) code you used (including how you tried to use it and what address you used in your browser)? See [ask] and \[what is a\] [mre] – jsejcksn Dec 03 '22 at 11:02
  • [^](https://stackoverflow.com/questions/74665951/how-can-i-create-a-dynamic-product-page-using-html-css-and-javascript?noredirect=1#comment131801194_74665951) @Gipjonat You still haven't showed us how you use the scripts in your HTML (that's important to how they run in tha page(s)). Be sure to re-read [what is a] [mre]. – jsejcksn Dec 04 '22 at 09:30

1 Answers1

0

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

FrancXPT
  • 1
  • 1