[英]jQuery - persist form data when changing back and forth between pages
我知道在 S/O 上有幾篇關於在導航離開和返回頁面時在網頁表單中持久化數據的相關帖子，但到目前為止，在嘗試實施建議時，它們都沒有幫助/與我的特定情況有關。
請參閱此代碼筆：
https://codepen.io/Nola111/pen/BaNJmrx
請注意屏幕右上角的第 1 頁和第 2 頁鏈接。 如果第 1 頁的任何字段中有數據，如果我切換到第 2 頁，然后切換回第 1 頁，我需要保留該數據。如果第 2 頁表單中有數據，我需要保留這些數據，如果您從第 2 頁切換到第 1 頁，然后返回到第 2 頁。
如果我在 codepen 上錯誤地執行了多頁方法，請提前道歉。 這是我能看到的唯一方法。
以下是遵守 S/O 規則的代碼：
JS：
$(document).ready(function() {
var endpoint = "http://localhost:53809/";
/* eslint eqeqeq: 0 */
$(".js-example-basic-single").select2();
// Initialize modal
$(".modal").modal();
// Date Picker
M.Datepicker.init($(".datepicker"), { format: "yyyy-mm-dd" });
$(".modal").modal();
const checkRads = () => {
const checked = $("input[type=radio][name=group]:checked").val();
const create = checked === "create";
const update = checked === "update";
const suppress = checked === "suppress";
$("#proid").toggle(!create);
$("#deleteid").toggle(suppress);
$(".fields").toggle(!suppress);
$("#btnSearch").toggle(update);
};
$(function() {
$(".js-example-basic-single").select2();
// Hide show inputs
$("input[type=radio][name=group]").on("change", checkRads);
checkRads();
});
$("form").submit(function(event) {
event.preventDefault();
$(form)
.find(":input")
.prop("disabled", true);
var selectedValue = $("input[name='group']:checked").val();
switch (selectedValue) {
case "create":
newProfile($(this));
break;
case "suppress":
deleteProfile($(this));
break;
default:
updateProfile($(this));
}
});
});
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body class="body-custom">
<nav class="nav-custom">
<div class="nav-wrapper">
<ul id="nav-mobile" class="right">
<li><a href="https://codepen.io/Nola111/pen/BaNJmrx">Page 1</a></li>
<li><a href="https://codepen.io/Nola111/pen/qBdpVJq">Page 2</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="head">
<div class="row">
<h4 class="title">This is a website</h4>
</div>
</div>
<div class="form">
<div class="row">
<form id="form" action="">
<div class="row">
<div class="type">
<label>
<input class="with-gap" name="group" value="create" type="radio" checked />
<span>Create</span>
</label>
<label>
<input class="with-gap" name="group" value="update" type="radio" />
<span>Update</span>
</label>
<label>
<input class="with-gap" name="group" value="suppress" type="radio" />
<span>Suppress</span>
</label>
</div>
</div>
<div id="proid" class="row">
<div class="input-field col s11">
<input id="profile_id" type="text" class="validate">
<label for="profile_id">ID</label>
</div>
<div class="input-field col s1">
<a id="btnSearch" class="btn-floating btn-small waves-effect waves-light teal lighten-2"><i
class="material-icons">search</i></a>
</div>
</div>
<!-- Delete Reason -->
<div id="deleteid" class="row">
<div class="input-field col s12">
<select class="js-example-basic-single" name="deletereason" id="deletereason">
<option value="" disabled selected>Choose delete reason</option>
<option value="1">Reason 1</option>
<option value="2">Reason 2</option>
<option value="3">Reason 3</option>
</select>
</div>
</div>
<div class="row fields">
<div class="input-field col s12">
<input id="name" name="name" type="text" class="validate">
<label for="name">Name</label>
</div>
<div class="input-field col s12">
<!--<select id="country">-->
<select class="js-example-basic-single" name="country" id="country">
<option value="" disabled selected>Choose Country</option>
<option value="Afghanistan;AFG">Afghanistan</option>
<option value="Åland Islands;ALA">Åland Islands</option>
<option value="Albania;ALB">Albania</option>
<option value="Algeria;DZA">Algeria</option>
<option value="American Samoa;ASM">American Samoa</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="errorModal" class="modal">
<div class="modal-content">
<h4></h4>
<p></p>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
這是本地存儲的基本示例：
https://codepen.io/doughballs/pen/JjdMaKN
我們有兩個輸入 - 第一個我使用 value="" 預先填充，第二個在頁面加載時為空白。 這代表表單的第 2 頁。
<div class="container">
<div class="row">
<div class="input-field col s6">
<input id="user_inputted_data" type="text" class="validate" value="User inputted data">
<label for="user_inputted_data">User Inputted Data</label>
</div>
<div class="input-field col s6">
<input id="saved_data" type="text" class="validate">
<label for="saved_data">Data from another page</label>
</div>
</div>
</div>
然后我們在本地存儲中保存了一些虛擬數據。 這一步實際上會發生在第 1 頁。
// This would happen on another page
var savedData = ['I am some saved data'];
localStorage.setItem('savedData',savedData)
// Here we check if there is anything saved. Try commenting the above lines out and saving thepen.
if (savedData) {
$('#saved_data').val(savedData);
}
我們檢查本地存儲中是否以該名稱保存了任何內容，如果有，我們使用該數據填寫輸入。 對於用戶輸入的數據，我們檢查該字段是否有任何值，如果有，我們將其保存到本地存儲以供第 3 頁使用。
var userInputtedData = $('#user_inputted_data').val();
if (userInputtedData) {
localStorage.setItem('userInputtedData',userInputtedData)
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
在頁面之間來回切換時，它保留輸入值，但不保留jQuery設置的文本
[英]When going back and forth between pages it keeps input value but not text set by jQuery
在JavaScript和php之間來回傳遞表單ID作為變量
[英]Passing form ID's as a variable back and forth between javascript and php
在p和textarea之間來回移動數據，但保留換行符
[英]Moving data back and forth between p and textarea, but preserving linebreaks
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.