Array values changed by Javascript function resets when changing HTML pages

Question

I have a blank array in my javascript called Counter. When I run the test() function, I want it to add a value to the array and change HTML pages. But while in the second page, if I console.log(Counter), it appears as blank.

How can I add a value to the array while maintaining it when changing pages?

Javascript

var Counter = [];

function test() {
    Counter.push("1")
    window.location.replace("page2.html")
}

Please refer this: https://stackoverflow.com/questions/23213788/how-to-pass-variable-value-between-different-html-pages-in-javascript — Amee Bhadania, Aug 09 '20 at 12:44

score 1 · Answer 1 · answered Aug 09 '20 at 12:28

Create a new text file and add your Counter variable to it...

 var Counter = [];

...and then rename the text file to Shared.js

Now add this line to all HTML pages that need this variable, in their HEAD section...

<script src="Shared.js"></script>

All pages should now be able to share this array as well as any other variables you may wish to add to Shared.js.

score 0 · Answer 2 · answered Aug 09 '20 at 12:05

0

try this: window.location.replace("page2.html?Counter=" + Counter)

answered Aug 09 '20 at 12:05

DCR

14,737
12
52
115

score 0 · Answer 3 · answered Aug 09 '20 at 12:08

Variables aren't saved when refreshing or going to a different web page. If you want to save them, you can try saving them in Cookies, or, an easier solution, HTML5 Storage.

First, you transform your variable into a string using JSON: var CounterString = JSON.stringify(Counter);

Then, you save the string in HTML5 Storage: localStorage.setItem("Counter", CounterString);

After that, wherever you want to access the Counter, just use: Counter = JSON.parse(localStorage.getItem("Counter")); (It gets the Counter String and parses it back to a JavaScript Object.

Full Code:

var Counter = JSON.parse(localStorage.getItem("Counter"));

function test() {
    Counter.push("1")
    var CounterString = JSON.stringify(Counter);
    localStorage.setItem("Counter", CounterString);
    window.location.replace("page2.html")
}

score 0 · Answer 4 · answered Aug 09 '20 at 12:09

The JavaScript execution context is limited to a single page. In other words, all your JavaScript variables are lost when you navigate away from the page.

One solution is to use the localStorage.

LocalStorage allows you to save short amount of data which persists across sessions (same domain). You can save the stringified array to the localStorage and retrieve it back when loading the page.

//Save array to localstorage
window.localStorage.setItem('arr', JSON.stringify(arr));


//Retreive item from localStorage
arr = window.localstorage.getItem('arr');
arr = JSON.parse(arr);

There are other solutions such as passing the stringified array value as a ural parameter to the next page. But I guess localStorage is less work.

Is there any way to do it without changing the array into a string? I still need to use it for other calculations. — user10289295, Aug 11 '20 at 12:28
The original array stays intact. String conversion is just for saving it in the localStorage. — Charlie, Aug 11 '20 at 14:14

score 0 · Answer 5 · answered Aug 09 '20 at 12:21

You can also use the sessionStorage.

PageOne.html

<html>
    <head>
        <title>Page One</title>
    </head>
    <body>
        <button onClick="test()">Click me!</button>
        <script>
        var Counter = [];

        function test() {
            Counter.push("1");
            sessionStorage.setItem("counter", JSON.stringify(Counter));
            window.location.replace("PageTwo.html");
        }
        </script>
    </body>
</html>

PageTwo.html

<html>
    <head>
    </head>
    <body>
        <script>
            var counter = sessionStorage.getItem("counter");
            console.log(counter);
        </script>
    </body>
</html>

Array values changed by Javascript function resets when changing HTML pages

5 Answers5