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!

You're calling window.location.href.indexOf('Two'), which is case sensitive. Are you sure that Two is actually part of the second page's URL? — Obsidian Age
– Obsidian Age, Commented May 22, 2017 at 22:31
Yep! I believe it works because "oh" gets logged into the console when the 2nd page loads in. — bobthebuilder4t5
– bobthebuilder4t5, Commented May 22, 2017 at 22:52
@yezzz the second page is connected to the single Javascript file so from the allTheData array there? at least that's what i was hoping for :(. — bobthebuilder4t5
– bobthebuilder4t5, Commented May 22, 2017 at 23:54
In a browser, the global scope is the window object. If you replace the window, you replace the global scope. — david25272
– david25272, Commented May 23, 2017 at 3:46

Brian Peacock · Accepted Answer · 2017-05-23 20:32:41Z

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. :)

edited May 23, 2017 at 20:32

answered May 23, 2017 at 1:45

Brian Peacock

1,84918 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bobthebuilder4t5 Over a year ago

Thanks a bunch! It's just what I needed.

Brian Peacock Over a year ago

@bobthebuilder4t5 No probs :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related