保存表單輸入數據以在另一個頁面上使用

Question

有三個網頁。 我想將數據從我的第一頁和第二頁傳輸到第三頁。 第一個網頁是一個簡單的表格。 第二個網頁由動態表組成。 該網頁應打印其他兩頁數據。

vib1.html

 <h1><b>ENTER YOUR PERSONAL DETAILS</b></h1>


 <form name="vibhu"     action="file:///E:/eclipse_workspace/MyFirstWebApp/WebContent/html/vib3.html" method="GET">
<b>Full Name :</b><br><input type="text" name="name"><br>
<b>Age :</b><br><input type="text" name="age"><br>
<b>Gender :</b><br>
Male<input type="radio" name="gender">
Female<input type="radio" name="gender"><br>
<b>Email :</b><br><input type="text" name="email"><br><br>
<input type="submit" value="Next" >


</form>
</body>
</html>

vib2.html

<div>
    <input type="button" value="Add" class="plusbtn" /> <input
        type="button" value="Remove" class="minusbtn" />
</div>

<table width="50%" border="1" cellpadding="1" cellspacing="1"
    class="test">
    <tr>
        <td>Street</td>
        <td>HouseNo</td>
        <td>City</td>
        <td>Country</td>
    </tr>
    <tr>
        <td><input type="text" class="txtbox" value="" /></td>
        <td><input type="text" class="txtbox" value="" /></td>
        <td><input type="text" class="txtbox" value="" /></td>
        <td><input type="text" class="txtbox" value="" /></td>
    </tr>
</table>
<form name="vibhu"
    action="file:///E:/eclipse_workspace/MyFirstWebApp/WebContent/html/vib3.html"
    method="GET">
    <input type="submit" value="Submit">
</form>
<style>
.txtbox {
border: none;
width: 100%;
}

input {
font-size: 17px;
height: 30px;
}

table {
background: none repeat scroll 0 0 #abcdef;
border: 1px solid #000;
}
</style>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>
<script>
    $('.plusbtn')
            .click(
                    function() {
                        $(".test")
                                .append(
                                        '<tr><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
                    });
    $('.minusbtn').click(function() {
        if ($(".test tr").length != 2) {
            $(".test tr:last-child").remove();
        } else {
            alert("You cannot delete first row");
        }
    });
</script>
</body>
</html>

vib3.html

個人資料如下：

Answer 1

好吧，考慮到您標記了 jQuery 和 JavaScript，而不是像 PHP、ASP.Net 等后端語言，我建議使用HTML5 的 Session Storage 。 顯然，如果用戶禁用了 JavaScript，這將不起作用。

首先，您需要收集表單數據以存儲：

var formData = $('#vibhu').serialize();

然后，因為 SessionStorage 只接受字符串值，我們需要將表單數據轉換為 JSON：

formData = JSON.stringify(formData);

然后我們可以檢查是否支持 SessionStorage，如果支持，我們將存儲表單的數據以備后用：

if (window.sessionStorage) {
    sessionStorage.setItem('formData', formData);
}

要稍后獲取表單數據，您可以執行以下操作：

if (window.sessionStorage) {
    var myFormData = JSON.parse(sessionStorage.getItem('formData'));
    console.log(myFormData.email);
}

如果您希望無論 JavaScript 是否被禁用/啟用都能夠正常工作，您將需要使用服務器端腳本。 但是，我不知道您使用的是什么語言，因為您沒有標記任何服務器端語言。

注意：您集成到前端的任何存儲功能對於存儲有價值的/個人信息都是不安全的。 對於有價值的信息，我建議使用 SSL 將敏感數據發布到您的服務器並正確存儲，並在需要時散列有價值的值。