[英]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.