javascript - 干燥 JS 代码并隐藏地址栏上的输入？

Question

我有一个脚本，可以将用户的输入传递到completed.html 页面上，但这里有两个问题:

1. 所有用户输入都显示在地址栏上，我想隐藏它，但我不想使用 POST 方法，这会破坏我的 JS 脚本的用途。有什么办法可以隐藏这些输入而不改变方法，即使我必须改变 JS 脚本？

2. 我的 JS 代码非常重复，重复了 4 次，我想知道一种更好的编写方法，而不需要到处复制和粘贴？

index.html

<div id="container">
    <header>
        <h1>Registration Form</h1>
        <hr>
    </header>
    <article>
        <form action="completed.html" method="GET">
            <label for="FirstName"><b>First Name:</b></label>
            <input name="FirstName" type="text" placeholder="John" required>
            <label for="LastName"><b>Last Name:</b></label>
            <input name="LastName" type="text" placeholder="Doe" required>
            <label for="email"><b>Email:</b></label>
            <input name="email" type="text" placeholder="example@mail.com" required>
            <label for="password"><b>Password:</b></label>
            <input name="password" type="password" placeholder="Password here." required>
            <p></p>
            <input type="submit" value="Submit">
        </form>
    </article>
    <footer>
        Copyright @ 2017 Name
    </footer>
</div>

完成.html

<div id="container">
    <header>
        <h1>Registration Completed!</h1>
        <hr>
    </header>
    <article>
        <div id="info" style="float: left;">
            <p>Thank you for registering on our site! An verification email has been seen to your email address! To make sure we got everything right, we would like you to review the infomation you've put in.</p>
            <div id="fn">
                Your First Name is:
            </div>
            <div id="ln">
                Your Last Name is:
            </div>
            <div id="em">
                Your email is:
            </div>
            <div id="pw">
                Your password is:
            </div>
        </div>
    </article>
    <footer>
        Copyright @ 2017 Name
    </footer>
</div>
<script>
    function processForm() {
        var ary = location.search.substring(1).split("&");

        var fnpart = ary[0].split("=");
        frn = unescape(fnpart[1]);
        document.getElementById("fn").innerHTML = "<b>Your First Name is:</b>" + "<br>" + frn;

        var lnpart = ary[1].split("=");
        lsn = unescape(lnpart[1]);
        document.getElementById("ln").innerHTML = "<b>Your Last Name is:</b>" + "<br>" + lsn;

        var empart = ary[2].split("=");
        ema = unescape(empart[1]);
        document.getElementById("em").innerHTML = "<b>Your Email is:</b>" + "<br>" + ema;

        var pwpart = ary[3].split("=");
        psw = unescape(pwpart[1]);
        document.getElementById("pw").innerHTML = "<b>Your First Name is:</b>" + "<br>" + psw;
    }
    processForm();
</script>

Answer 1

您可以尝试使用如下模式，使用循环索引来匹配短名称/长名称中的位置:

但是密码不应该像现在这样在该位置可见!

var names = [['fn', 'First Name'], 
             ['ln', 'Last Name'],
             ['em', 'Email'],
             ['pw', 'Password']
            ]

for (ind in ary){
  var part = unescape(ary[ind].split("=")[1]);
  document.getElementById(names[ind][0]).innerHTML = "<b>Your "+ names[ind][1] + " is:</b> <br>" + part;

}