Sharing a Variable Between Multiple HTML Pages

How can I share JS variables between pages?

Store your variable value in localstorage like this:

Page 1

localStorage.setItem("key", "yourvalue");

page 2

document.getElementById("yourVariable").innerHTML = localStorage.getItem("key");

In your case, It will be:

Page 1

<html>
<head>Page 1</head>
<body>
<p id="nom">1</p>
<button onclick="YourFunctionName()">Your Button</button>

<script>
function YourFunctionName(){
    document.getElementById("nom").innerHTML = parseInt(document.getElementById("nom").innerHTML) + 1;
    localStorage.setItem("key", parseInt(document.getElementById("nom").innerHTML));
}
</script>
</body>
</html>

Page 2

<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

</head>

<body>
<p id="nome"></p>

<script>
$(document).ready(function(){
    document.getElementById("nome").innerHTML = localStorage.getItem("key");
});
</script>
</body>
</html>

how to exchange variables between two HTML pages?

In example1.html:

<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>

or generate the links with Javascript as desired. Just make sure the ?varName=value gets onto the end of example2.html somehow.

Then, in example2.html, you use Javascript to parse the query string that example2 came with.

To do this, you could try Querystring.

// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");

Alternatively, parent.document.URL contains the complete URI for the page you're on. You could extract that:

parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);

and parse it manually to pull the variables you encoded into the URI.

EDIT: Forgot the 'new' part of 'new Querystring()'. Oops...

Share data between HTML pages

why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.

To store values for a session:

sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')

or more permanently:

localStorage.setItem('label', 'value')
localStorage.getItem('label')

So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..

How do I share a PHP variable between multiple pages?

Use $_SESSION -!

session_start();
$_SESSION['username'] = $_POST['username'];

You of course want to filter/sanitize/validate your $_POST data, but that is outside of the scope of this question...

As long as you call session_start(); before you use $_SESSION - the values in the $_SESSION array will persist across pages until the user closes the browser.

If you want to end the session before that, like in a logout button --- use session_destroy()

Passing variables between pages using localStorage and passing variables in a link

Rather than using id, you can use class for showing result because id is unique. Also for storing male, female or neutral you can use radio buttons, and when you click any of them, just save the result in the localStorage. Here are the three pages.

page1.html

<body>
    <p> Hello! what's your name?</p>

    <form action="page2.html">
        <input type="text" id="txt" />
        <input type="submit" value="name" onClick="passvalues();" />
    </form>

    <script>
        function passvalues() {
            var nme = document.getElementById("txt").value;
            localStorage.setItem("textvalue", nme);
            return false;
        }
    </script>

</body>

page2.html

<body>
    enter code here
    <p>Hi <span class="result">Lucy<span> nice to meet you!</p>

    <p>How are you today <span class="result"></span>?</p>

    <a href="page3.html">page3</a>

    <script>

        var result = document.getElementsByClassName('result');

        [].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
        });

    </script>
</body>

page3.html

<body>
    <p><span class="result"></span> which gender designation do you prefer to be used with you?</p>

    <form name="genderForm" action="">
        <input type="radio" name="gender" value="male"> Male<br>
        <input type="radio" name="gender" value="female"> Female<br>
        <input type="radio" name="gender" value="neutral"> Neutral
    </form>

    <p>You've selected <span class="selectedGender"></span></p>

    <script>
        var result = document.getElementsByClassName('result');

        [].slice.call(result).forEach(function (className) {
            className.innerHTML = localStorage.getItem("textvalue");
        });

        var rad = document.genderForm.gender;
        var prev = null;
        for (var i = 0; i < rad.length; i++) {
            rad[i].addEventListener('change', function () {
                (prev) ? console.log(prev.value) : null;
                if (this !== prev) {
                    prev = this;
                }
                console.log(this.value);
                document.getElementsByClassName("selectedGender")[0].innerHTML = this.value;
                localStorage.setItem("gender", this.value);
            });
        }
    </script>
</body>

How to pass variable value between different html pages in javascript

You can pass the value as a url fragment.

In your on click function, open '/profile.html#'+text

In your profile.html get the url fragment.

Sample code:

To navigate to profile.html

window.location.href = '<path to profile.html>' + '#' + text;

In profile(), to get the parameter, use

var text = window.location.hash.substring(1)