Is there a way that I can send data from Sign-Up Form to another HTML Page?

Question

I am creating a static website using plain front-end technologies(HTML/CSS/JavaScript). I want to register an account through a form and pass the user's information (excluding the passwords for now) to display it on another HTML page. Not only do I want to pass the information to the profile page, but also I want to save and store the user(s) information. All of my JavaScript codes are external. I used id and name attributes to link the desired location for the data.

Below are snippets of my code below.

signup.html

<div id="content">
    <div class="container">

        <div id="firstheading">
            <h1>Login</h1>
        </div>

        <div class="form-login">
            <form action="profile.html" method="POST" class="form" id="form" onsubmit="return validate();">

                <div class="col">
                    <label for="email">Email</label>
                    <input type="email" for="proEmail" id="proEmail1" class="form-control"
                        placeholder="Professional Email">
                    <div class="error_msg" id="pemail_err_msg">

                    </div>
                </div>
                <div class="col">
                    <label for="password">Password</label>
                    <input type="password" for="password" id="passwordLogin" class="form-control"
                        placeholder="Password">
                    <div class="error_msg" id="pw_err_msg">

                    </div>
                    <br>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-block">Log in</button>
                </div>
                <p class="form__text">
                    <a href="#" class="form__link">Forgot your password?</a>
                </p>
                <p class="form__text">
                    <a id="linkCreateAccount"
                        href="file:///C:/Users/sykes/Documents/Personal%20Projects/Consulting%20Website/Signup.html"
                        class="linkLogin">Create An Account</a>
                </p>
            </form>
        </div>
    </div>
    <!--End of Container-->

</div>

signupdata.js (linked in signup.html)

<script>
function signupForm() {

    var firstname = document.getElementById("firstname");
    var lastname = document.getElementById("lastname");
    var proEmail = document.getElementById("proEmail");
    var schoolEmail = document.getElementById("schoolEmail");
    var password = document.getElementById("password");
    var password2 = document.getElementById("password2");

    if (proEmail == 1 && schoolEmail == 1) {
        firstname.style.border = "1px solid #ff8471";
        error_message("fn_err_msg", "An account with these email(s) already existed.");
    }
    else if (password != password2) {
        firstname.style.border = "1px solid #ff8471";
        error_message("fn_err_msg", "Password Must Match.");

    }
    else {
        if (typeof (localStorage) != "undefined" && proEmail != 1 && schoolEmail != 1) {
            localStorage.name = document.getElementById("firstname").value;
            localStorage.name = document.getElementById("lastname").value;
            localStorage.name = document.getElementById("proEmail").value;
            localStorage.name = document.getElementById("schoolEmail").value;
        }
    }
    document.getElementById("form").submit();
}
</script>

setSignUpData.js (linked in profile.html)

<script>

function setData() {
    if (typeof (localStorage) != "undefined") {
        document.getElementById("firstname").innerHTML = localStorage.name;
        document.getElementById("lastname").innerHTML = localStorage.name;
        document.getElementById("proEmail").innerHTML = localStorage.name;
        document.getElementById("schoolEmail").innerHTML = localStorage.name;

    }
}
</script>

profile.html

<div id="content">
    <div class="container">

        <div id="firstheading">
            <h1>Welcome to your Student STEM Website Profile</h1>
        </div>

        <label for="firstname" id="firstname">First Name: </label><br>
        <label for="lastname" id="lastname">Last Name: </label><br>
        <label for="biography">Biography</label><br>

        <label for="college">Community College or University: </label><br>
        <label for="major">Major</label><br>

        <label for="proEmail" id="proEmail">Professional Email: </label><br>
        <label for="schoolEmail" id="schoolEmail">School Email: </label><br>

        <label for="linkedin">LinkedIn Profile</label><br>
        <label for="github">Github Profile</label><br>
        <label for="resumecv">Resume or CV</label><br>

        <label for="phonenumber">Phone Number</label><br>
    </div>
    <!--End of Container-->

</div>

Answer 1

You have a few issues in your script:

1. localStorage.name isn't a real property.

It's not clear where you originally saw this convention, but window.localStorage is an instance of a Storage-type object, which (as the linked MDN page states) does not have a name attribute by default.

2. You're overwriting the value you've placed in localStorage.name.

For argument's sake, let's say that you could store data in localStorage.name and have it persist across pages as it seems is your understanding. When you execute a line like so:

localStorage.name = 'hello!';

... what you're telling the JavaScript interpreter is "interpreter, please store the string data hello! in the variable localStorage.name", which it will do happily. The issue here is that you've told the interpreter to do this over and over again:

localStorage.name = 'hello!';
localStorage.name = 'goodbye!';
localStorage.name = 'sayonara!';

Again, the interpreter will happily process each of these in order. However, the end result of these three lines is that localStorage.name is now set to the string sayonara!, and anything else you've tried to stuff in there is now lost/overwritten.

It's important to remember that the interpreter (and, more generally, computers as a whole) will do exactly what you tell it to; it cannot determine that your intention is to store these variables separately for later use unless you explicitly do so.

3. The Storage API requires the use of its getter/setter methods.

Unfortunately, you can't directly manipulate properties on a Storage object in this way and persist this data as intended across pages on your domain (the associated MDN page makes this clear; you should review it). Instead, setting a property requires the use of the setItem() method:

localStorage.setItem('name', 'John Smith');

The above line sets the value of the local storage key name to the string John Smith. If we wanted to go back and retrieve the value we stored there later, we'd reference its key as the sole parameter for the getItem() method:

localStorage.getItem('name'); // returns 'John Smith'

In your scenario, you'd set the innerHTML or innerText property of your target element to the value you've stored on this key.

4. You don't ever trigger your setData() function.

As such, the data you store in localStorage won't ever be painted into the DOM. Add a button to your interface that triggers this function, or execute it as a callback to an event listener of your choice.