How can i pass data from one HTML page to another using JavaScript

Question

Im having a hard time passing data from one HTML page to another. Im building an online store, i have one page with my items, and with their buttons for users to pick. and i have seconde page that is my checkout page. I want to make it so that when the user clicks on the items in the items page it will get written on the DOM on the checkout page. 2 main issues im having:

1 inside the javascript file i have for both pages, i have the variables and eventListerner for the buttons from the items page, and i also have the variable for the table in the checkout page where i want to write with the DOM. When im on the items page, my table variable comes as null when console.log . And when im on the checkout page i get:

itemsScript.js:44 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at addEventListeners (itemsScript.js:44)
    at Array.map (<anonymous>)
    at itemsScript.js:46 

So i see that they are not comunicating properly.

2 where should i put the value and names of the items, on the buttons themself? maybe a data.js file, and the how could i get this data from the button that was clicked?

Answer 1

Is the checkout page a complete new site or implemented inside your product site?

In case of a complete new site you will trigger a new request. One way is using local storage/cache as one already mentioned. This would probably the best solution so you wont lose any items on a normal site reload.

In case of a implemtation direct on the product site have a look at ajax. This might help you.