How to pass a variable's value to the next page with JavaScript?

Question

I want to be able to pass D, I, H, and A to the next page. My code on that page needs to be able to access their values. Here's what I have tried so far:

function tally() {
    var Dpoint, Ipoint, Hpoint, Apoint;

    var party_Score = ['Dpoint', 'Ipoint', 'Hpoint', 'Apoint'];
    var D, I, H, A;
    var value_Point;
    var type_Choice;
    var tag_Choice;

    var inputs = document.getElementsByTagName("input"),
        iLength = inputs.length;

    D = I = H = A = 0;

    for (i = 0; i < iLength; i++) if (inputs[i].checked) {
        value_Point = parseInt(inputs[i].value);
        if (inputs[i].name.search('D') > -1){ D += value_Point; }
        if (inputs[i].name.search('I') > -1){ I += value_Point; }
        if (inputs[i].name.search('H') > -1){ H += value_Point; }
        if (inputs[i].name.search('A') > -1){ A += value_Point; }
    }

    // DIHA is areadly added how to pass them them to other page ?
    document.getElementById('D').style.width = D + 'px';
    alert(D);
    document.getElementById('I').style.width = I + 'px';
    document.getElementById('H').style.width = H + 'px';
    document.getElementById('A').style.width = A + 'px';
    Dpoint = D; //passing this value to next page
    Ipoint = I; //passing this value to next page
    Hpoint = H; //passing this value to next page
    Apoint = A; //passing this value to next page
}

You can't, unless you : 1) use a javascript framework that allows for routing, 2) encode your data and pass it through the URL, 3) use (if you can be HTML5 compliant) localStorage. — Christian Bonato
– Christian Bonato, Commented Nov 30, 2014 at 4:44
Use cookies, HTML5 web storage, or pass it via the URL (GET). — Spencer Wieczorek
– Spencer Wieczorek, Commented Nov 30, 2014 at 4:45

Diptendu · Accepted Answer · 2014-11-30 05:41:10Z

In test1.html you write

localStorage.setItem("Dpoint", D); //passing this value to next page
localStorage.setItem("Ipoint", I); //passing this value to next page
localStorage.setItem("Hpoint", H); //passing this value to next page
localStorage.setItem("Apoint", A); //passing this value to next page

and in test2.html you get the values like this

D = localStorage.getItem("Dpoint"); 
I = localStorage.getItem("Ipoint");
H = localStorage.getItem("Hpoint"); 
A = localStorage.getItem("Apoint");

Note: This works only in modern browsers that support HTML5 local storage. To make it more robust and work across all browsers you can use some library like YUI which has a module called cache-offline. If you want to implement it yourself you can check the YUI code here

From security standpoint localstorage and cookies are the far more secure than URL GET params since these enforce the same domain restriction. If your data is more sensitive then you might want to consider it storing in the server side in some encrypted format.

From persistence standpoint this method only persists data within a browser. If you want cross browser persistence then again you need to think storing the info in the server.

Collectives™ on Stack Overflow

How to pass a variable's value to the next page with JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related