Attempting to use a global array inside of a JS file shared between 2 HTML files and failing

Question

So I have one HTML page which consists of a bunch of form elements for the user to fill out. I push all the selections that the user makes into one global variable, allTheData[] inside my only Javascript file.

Then I have a 2nd HTML page which loads in after a user clicks a button. This HTML page is supposed to take some of the data inside the allTheData array and display it. I am calling the function to display allTheData by using:

window.onload = function () {
    if (window.location.href.indexOf('Two') > -1) {
        carousel();
    }
}

function carousel() {
    console.log("oh");
    alert(allTheData.toString());
}

However, I am finding that nothing gets displayed in my 2nd HTML page and the allTheData array appears to be empty despite it getting it filled out previously in the 1st HTML page. I am pretty confident that I am correctly pushing data into the allTheData array because when I use alert(allTheData.toString()) while i'm still inside my 1st HTML page, all the data gets displayed.

I think there's something happening during my transition from the 1st to 2nd HTML page that causes the allTheData array to empty or something but I am not sure what it is. Please help a newbie out!

Answer 1

Web Storage : This sounds like a job for the window.sessionStorage object, which along with its cousin window.localStorage allows data-as-strings to be saved in the users browser for use across pages on the same domain.

However, keep in mind that they are both Cookie-like features and therefore their effectiveness depends on the user's Cookie preference for each domain.

A simple condition will determine if the web storage option is available, like so...

if (window.sessionStorage) {
   // continue with app ...
} else {
   // inform user about web storage
   // and ask them to accept Cookies
   // before reloading the page (or whatever)
}

Saving to and retrieving from web storage requires conversion to-and-from String data types, usually via JSON methods like so...

// save to...
var array = ['item0', 'item1', 2, 3, 'IV'];
sessionStorage.myApp = JSON.stringify(array);

// retrieve from...
var array = JSON.parse(sessionStorage.myApp);

There are more specific methods available than these. Further details and compatibility tables etc in Using the Web Storage API @ MDN .

Hope that helps. :)