Javascript global array becomes undefined when used on other html page

Question

I have declared some global variables along with global array in my firstpage.hmtl's script and these global variables and array are accessible everywhere on this page and working fine on this page. And I want to use the values of window.arr[] on all pages of the application but it is showing undefined on all other pages of application

When I redirect from firstpage.html to secondpage.html then I try to get the values of these global variables but here the issue arise because just window.name is working on second page other than that every global variable's value is undefined

I have tried many names for these global variables but just one of them is working which is window.name other than that everything is undefined.

firstpage.html

    window.name = "john";
    window.car = "BMW";
    window.arr = [];

    $(".hotels").click(function () {
            arr.push('hotels');
            console.log("name = " + window.name); //working, prints "name = john"
            console.log("car = " + window.car); //working, prints "car = BMW"
            console.log("arr = " + window.arr); //working, prints "arr = hotels"
    }

secondpage.html

$(document).ready(function () {
    console.log("arr = " + window.arr); //not working here, prints "arr = undefined"
    console.log("car = " + window.car); //not working here, prints "car = undefined"
    console.log("name = " + window.name); //working, prints "name = john"

});

Answer 1

You have two different pages, you cannot pass data like this. But you can save it in localStorage fe and use it from there.