[英]Store form data in local storage using array and retrieving it on new page
這是第一頁。
<form id="myform">
<label for="fname" class="fname_label">Name</label>
<input type="text" id="fname" class="input1" placeholder="Full Name" name="fname">
<label for="phone">Phone</label>
<input type="number" name="phone" id="phone" placeholder="Phone Number">
<label for="textarea" class="textarea_label">Address:</label>
<textarea name="address" id="textarea" type="text"></textarea>
<label for="select">Gender:</label>
<select name="select" id="select">
<option value = "0">Select</option>
<option value = "1">Male</option>
<option value = "2">Female</option>
<option value = "3">Other</option>
</select>
<label for="select1">Category:</label>
<select name="select1" id="select1">
<option value = "0">Select</option>
<option value = "1">Open</option>
<option value = "2">OBC</option>
<option value = "3">SC/ST</option>
<option value = "4">Other</option>
</select>
<label for="select2">State:</label>
<select name="select2" id="select2">
<option value = "0">Select</option>
<option value = "1">Maharashtra</option>
<option value = "2">Gujarat</option>
<option value = "3">Rajasthan</option>
</select>
<label for="select3">District:</label>
<select name="select3" id="select3">
<option value = "0">Select State</option>
<option value = "1">Select</option>
<option value = "1">Pune</option>
<option value = "1">Vidarbha</option>
<option value = "1">Thane</option>
<option value = "2">Select</option>
<option value = "2">Bharuch</option>
<option value = "2">Ahmedabad</option>
<option value = "2">Jamnagar</option>
<option value = "3">Select</option>
<option value = "3">Jaipur</option>
<option value = "3">Jodhpur</option>
<option value = "3">Bikaner</option>
</select>
<h id="qualifications">Qualifications:</h>
<label for="checkbox1">BE</label>
<input name="education[]" type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input name="education[]" type="checkbox" value="MCA" id="checkbox2">
<div data-role="fieldcontain">
<label for="select-based-flipswitch">Subscription:</label>
<select id="select-based-flipswitch" data-role="flipswitch">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
<button id="myButton" type="submit" value="Submit" class="ui-btn ui-btn-b">Submit</button>
</form>
這是我嘗試將價值存儲在用戶輸入的本地存儲中。
$(document).ready(function() {
$('#select').change(function() {
localStorage.setItem('select', $('#select option:selected').text());
});
$('#select1').change(function() {
localStorage.setItem('select1', $('#select1 option:selected').text());
});
$('#select2').change(function() {
localStorage.setItem('select2', $('#select2 option:selected').text());
});
$('#select3').change(function() {
localStorage.setItem('select3', $('#select3 option:selected').text());
});
$("button").click(function() {
var name = $("#fname").val();
var phonenum = $("#phone").val();
var address = $("#textarea").val();
var subscribe = $("#select-based-flipswitch").val();
var qualification = '';
var qualification1 = '';
if ($("#checkbox1").is(":checked")) {
qualification = $("#checkbox1").val();
}
if ($("#checkbox2").is(":checked")) {
qualification1 = $("#checkbox2").val();
}
var input = [name, phonenum, address, select, select1, select2, select3, qualification, qualification1, subscribe];
localStorage.setItem("input", JSON.stringify(input));
});
});
這是我要顯示所有數據的第二頁。
<body>
<div data-role="page" id="page2" data-dismissible="false">
<div data-role="header">
<h2 class="ui-title">Confirmation</h2>
</div>
<div data-role="main" class="ui-content">
<div id="content">
<p> Name: <span id="display_fname" class="one"></span></p>
</div>
<p> Phone No.: <span id="display_phone" class="one"></span></p>
<div id="content">
<p> Address: <span id="display_textarea"></span></p>
</div>
<p> Gender: <span id="display_select" class="one"></span></p>
<p> Category: <span id="display_select1" class="one"></span> </p>
<p> State: <span id="display_select2 " class="one"></span></p>
<p> District: <span id="display_select3" class="one"></span> </p>
<p> Qualification: <span id="display_qualifications" class="one"></span> </p>
<p> Subscription: <span id="display_select-based-flipswitch" class="one"></span> </p>
<a href="" class="ui-btn ui-btn-inline ui-btn-b btn-1" onClick="window.location.replace('form1.html');">OK</a>
<a href="" class="ui-btn ui-btn-inline ui-btn-b btn-2" onClick="window.location.replace('form1.html');"> Back</a>
</div>
</div>
</body>
這是我嘗試從本地存儲中獲取值。僅顯示名稱，電話地址，而未顯示任何內容。
$(document).ready(function() {
for (let i = 0; i < localStorage.length; i++) {
var storedInput = JSON.parse(localStorage.getItem("input"));
$("#display_fname").html(storedInput[0]);
$("#display_phone").html(storedInput[1]);
$("#display_textarea").html(storedInput[2]);
$("#display_select").html(storedInput[3]);
$("#display_select1").html(storedInput[4]);
$("#display_select2").html(storedInput[5]);
$("#display_select3").html(storedInput[6]);
$("#display_qualifications").html(storedInput[7] + " " + storedInput[8]);
$("#display_select-based-flipswitch").html(storedInput[9]);
localStorage.clear();
}
});
我只能顯示姓名電話和地址作為輸出。 其他字段未顯示任何內容。
假設輸入元素的name屬性與span元素的id屬性存在1對1映射（即<input name="fname" />映射到<span id="display_fname"> ，則可以輕松地使用邏輯執行以下操作：
name及其值。 將此數組轉換為JSON並將其存儲在localStorage中。 name鍵中的指向顯示元素的指針。 概念證明已發布在JsFiddle上，因為StackOverflow的代碼段無法在沒有瀏覽器抱怨CORS的情況下處理localStorage。 但是，下面的代碼非常簡單：
在您的表單頁面上 ：
$(document).ready(function() {
// Instead of listening to button click, always listen to form submit event
$('#myform').submit(function(e) {
e.preventDefault();
// Create an array of objects called `formData`
var formData = $(this).find(':input').map(function() {
return {
name: $(this).attr('name'),
value: $(this).val()
};
}).get();
// Store it in localStorage
localStorage.setItem('formData', JSON.stringify(formData));
});
});
在顯示/確認頁面上 ：
$(document).ready(function() {
// Read and parse from localStorage
var formData = JSON.parse(localStorage.getItem('formData'));
// Iterate through array, and set HTML of matching <span> element
$.each(formData, function(i, datum) {
$('#display_' + datum.name).html(datum.value);
});
});
您可以嘗試以下類似的方法
<script>
$(document).ready(function(){
$("#myButton").click(function() {
localStorage.setItem("input", JSON.stringify($("#myform").serializeArray()));
});
$("#show").click(function(){
var j = JSON.parse(localStorage.getItem("input"));
$(j).each(function(k,v){
$("#display_"+v.name).html(v.value);
});
});
});
</script>
<body>
<input type="button" id="show" value="show"/>
<form id="myform">
<label for="fname" class="fname_label">Name</label>
<input type="text" id="fname" class="input1" placeholder="Full Name" name="fname">
<label for="phone">Phone</label>
<input type="number" name="phone" id="phone" placeholder="Phone Number">
<label for="textarea" class="textarea_label">Address:</label>
<textarea name="address" id="textarea" type="text"></textarea>
<label for="select">Gender:</label>
<select name="select" id="select">
<option value = "0">Select</option>
<option value = "1">Male</option>
<option value = "2">Female</option>
<option value = "3">Other</option>
</select>
<label for="select1">Category:</label>
<select name="select1" id="select1">
<option value = "0">Select</option>
<option value = "1">Open</option>
<option value = "2">OBC</option>
<option value = "3">SC/ST</option>
<option value = "4">Other</option>
</select>
<label for="select2">State:</label>
<select name="select2" id="select2">
<option value = "0">Select</option>
<option value = "1">Maharashtra</option>
<option value = "2">Gujarat</option>
<option value = "3">Rajasthan</option>
</select>
<label for="select3">District:</label>
<select name="select3" id="select3">
<option value = "0">Select State</option>
<option value = "1">Select</option>
<option value = "1">Pune</option>
<option value = "1">Vidarbha</option>
<option value = "1">Thane</option>
<option value = "2">Select</option>
<option value = "2">Bharuch</option>
<option value = "2">Ahmedabad</option>
<option value = "2">Jamnagar</option>
<option value = "3">Select</option>
<option value = "3">Jaipur</option>
<option value = "3">Jodhpur</option>
<option value = "3">Bikaner</option>
</select>
<h id="qualifications">Qualifications:</h>
<label for="checkbox1">BE</label>
<input name="education" type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input name="education" type="checkbox" value="MCA" id="checkbox2">
<div data-role="fieldcontain">
<label for="select-based-flipswitch">Subscription:</label>
<select id="select-based-flipswitch" data-role="flipswitch" name="select-based-flipswitch">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select>
</div>
<button id="myButton" type="button" value="Submit" class="ui-btn ui-btn-b">Submit</button>
</form>
<br/>
<br/>
<br/>
<br/>
<div data-role="page" id="page2" data-dismissible="false">
<div data-role="header">
<h2 class="ui-title">Confirmation</h2>
</div>
<div data-role="main" class="ui-content">
<div id="content">
<p> Name: <span id="display_fname" class="one"></span></p>
</div>
<p> Phone No.: <span id="display_phone" class="one"></span></p>
<div id="content">
<p> Address: <span id="display_address"></span></p>
</div>
<p> Gender: <span id="display_select" class="one"></span></p>
<p> Category: <span id="display_select1" class="one"></span> </p>
<p> State: <span id="display_select2" class="one"></span></p>
<p> District: <span id="display_select3" class="one"></span> </p>
<p> Qualification: <span id="display_education" class="one"></span> </p>
<p> Subscription: <span id="display_select-based-flipswitch" class="one"></span> </p>
<a href="" class="ui-btn ui-btn-inline ui-btn-b btn-1" onClick="window.location.replace('form1.html');">OK</a>
<a href="" class="ui-btn ui-btn-inline ui-btn-b btn-2" onClick="window.location.replace('form1.html');"> Back</a>
</div>
</div>
您可以使用openDB庫存儲整個對象-
db.store.setJSON("key", value); //to set value
db.store.getJSON("key"); //to get value
JavaScript-使用HTML5本地存儲來存儲表單數據並將其顯示在“謝謝”頁面上
[英]JavaScript - Using HTML5 Local Storage to store form data and to present it on the “Thank You” page
在另一個網頁上從本地存儲中檢索並顯示已保存的數據
[英]Retrieving AND Displaying saved data from local storage inanother web page
在本地存儲中存儲href鏈接的數據選擇值，並使用它在新頁面上選擇下拉選項
[英]Store data-select value of href link in local storage and use it to select dropdown option on new page
將多個表單輸入值以數組的形式存儲在 JavaScript 中的本地存儲中
[英]Store multiple form input values in local storage in JavaScript in the form of an array
通過HTML5驗證使用Javascript檢查表單是否有效，並將表單數據存儲在本地存儲中
[英]Check using Javascript if form is valid by HTML5 validation and store form data in local storage
如何使用 javascript 而不是 Django 會話將表單數據（Django 表單）存儲到瀏覽器的本地存儲？
[英]How to store Form Data (a Django form) to browser's local storage, using javascript and not Django sessions?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.