有沒有辦法可以將數據從注冊表單發送到另一個 HTML 頁面？

Question

我正在使用普通的前端技術（HTML/CSS/JavaScript）創建一個 static 網站。 我想通過表單注冊一個帳戶並傳遞用戶信息（暫時不包括密碼）以將其顯示在另一個 HTML 頁面上。 我不僅想將信息傳遞到個人資料頁面，還想保存和存儲用戶信息。 我所有的 JavaScript 代碼都是外部代碼。 我使用 id 和 name 屬性來鏈接數據的所需位置。

下面是我的代碼片段。

注冊.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（在 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（在 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>

配置文件.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

您的腳本中有一些問題：

1. localStorage.name不是真實財產。

不清楚您最初在哪里看到此約定，但window.localStorage是Storage類型 object的實例，默認情況下（如鏈接的 MDN 頁面所述）沒有name屬性。

2. 您正在覆蓋您在localStorage.name中放置的值。

為了論證，假設您可以將數據存儲在localStorage.name中，並讓它跨頁面持續存在，這似乎是您的理解。 當你像這樣執行一行時：

localStorage.name = 'hello!';

...您告訴 JavaScript 解釋器是“解釋器，請將字符串數據hello!存儲在變量localStorage.name中”，它會很高興地做到這一點。 這里的問題是您已經告訴口譯員一遍又一遍地這樣做：

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

同樣，解釋器將愉快地按順序處理其中的每一個。 但是，這三行的最終結果是localStorage.name現在設置為字符串sayonara! ，並且您嘗試在其中填充的任何其他內容現在都丟失/覆蓋了。

重要的是要記住解釋器（更一般地說，計算機作為一個整體）將完全按照您的指示去做； 它無法確定您是否打算單獨存儲這些變量以供以后使用，除非您明確這樣做。

3. Storage API 需要使用其 getter/setter 方法。

不幸的是，您不能以這種方式直接操作Storage object 上的屬性，並按預期跨域中的頁面保留此數據（相關的MDN 頁面清楚地說明了這一點；您應該查看它）。 相反，設置屬性需要使用setItem()方法：

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

上面的行將本地存儲鍵name的值設置為字符串John Smith 。 如果我們想返回 go 並檢索我們稍后存儲在那里的值，我們將引用它的鍵作為getItem()方法的唯一參數：

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

在您的場景中，您將目標元素的innerHTML或innerText屬性設置為您存儲在此鍵上的值。

4. 你永遠不會觸發你的setData() function。

因此，您存儲在localStorage中的數據永遠不會被繪制到 DOM 中。 在您的界面中添加一個按鈕來觸發此 function，或將其作為您選擇的事件偵聽器的回調執行。