Сохраните ввод данных из формы для использования на другой странице

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's 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 и правильно сохранить их, хэшируя ценные значения там, где это необходимо.