我正在尝试通过本地存储存储所有表单字段值(在输入 ID 下(，就像用户单击"保存"按钮时一样localStorage.setItem("input id", fieldvalue);。 原因是在以后的日期，用户可以选择重新加载表单字段值，而不是重新键入所有内容 问题是输入ID和名称字段未知，因为它们是根据用户在上一个中选择的内容生成的页面(他们选择的模板(。
演示(假设这是生成的(：
<input type="text" id="meta_title" name="seo_meta_title">
<input type="text" id="meta_description" name="seo_meta_description">
<input type="text" id="header" name="header">
<!-- Submit form-->
<input type="submit" value="Create">
<!-- buttons-->
<button onclick="save()">save</button>
<button onclick="load()">load</button>
因为我不知道输入 ID，所以我不能只写：
function save() {
if (typeof(Storage) != "undefined") {
//some_code_to_insert_value = x, y, z
localStorage.setItem("meta_title", x);
localStorage.setItem("meta_description", y);
localStorage.setItem("header", z);
}
}
负载功能也是如此
// LOAD
function load() {
if (typeof(Storage) != "undefined") {
// Adds data back into form fields
document.getElementById("meta_title").value = localStorage.getItem("meta_title");
document.getElementById("meta_description").value = localStorage.getItem("meta_description");
document.getElementById("header").value = localStorage.getItem("header");
}
}
我对 JavaScript 很陌生，因为我相信你可以告诉任何帮助、代码或链接将不胜感激，并且一个有效的 js 小提琴将是惊人的(只要它不依赖于预先知道输入 id 等(。我花了几个小时尝试这样做，并浪费了更多的时间尝试生成 PHP 所需的 JS，直到我被告知这是一种糟糕的方法。
如果你想依赖jQuery，这可以帮助你：
$('#save').on('click', function(){
$('input[type="text"]').each(function(){
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
});
$('#load').on('click', function(){
$('input[type="text"]').each(function(){
var id = $(this).attr('id');
var value = localStorage.getItem(id);
$(this).val(value);
});
});
建议避免使用inline-js，因此我更新了代码以使用.on((将click-handler附加到两个按钮。
演示
参考：
.each((
Replace Html Code And Script File
<form method='post' id='myform'>
<input type="text" id="meta_title" name="seo_meta_title">
<input type="text" id="meta_description" name="seo_meta_description">
<input type="text" id="header" name="header">
<!-- Submit form-->
<input type="submit" id="save" value="Create">
<!-- buttons-->
<button onclick="save()">save</button>
<button onclick="load()">load</button>
</form>
<script>
$('#save').on('click', function(){
var post_vars = $('#myform').serializeArray();
localStorage.setItem(id, post_vars);
});
</script>
重新审视这个问题，2022 年。不久前从事一个项目，我需要它。这是一个基于jquery的答案。
以下内容适用于最常见的单值输入、文本区域和单个选项选择。所有更改都将保存到localStorage变量中，并在页面刷新时推送。
$('input[type="checkbox"],input[type="radio"],input[type="text"],input[type="email"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="url"],textarea,select:not([multiple])').each(function (t) {
(localStorage.getItem(`local-${$(this).prop("id")}`) || localStorage.getItem(`local-${$(this).prop("name")}`)) &&
($(this).is(":checkbox") ? $(this).prop("checked", !0) : $(this).is(":radio") ? $(`#${localStorage.getItem(`local-${$(this).prop("name")}`)}`).prop("checked", !0) : $(this).val(localStorage.getItem(`local-${$(this).prop("id")}`))),
$(this).on("click keyup keypress change focus", function () {
$(this).is(":checkbox")
? $(this).prop("checked")
? localStorage.setItem(`local-${$(this).prop("id")}`, $(this).val())
: localStorage.removeItem(`local-${$(this).prop("id")}`)
: $(this).is(":radio")
? $(this).prop("checked") && localStorage.setItem(`local-${$(this).prop("name")}`, $(this).prop("id"))
: localStorage.setItem(`local-${$(this).prop("id")}`, $(this).val());
});
});