我将在Javascript中编写一些代码(包括在每个<input>上循环并添加侦听器(：
- 允许在按键后将所有
<input>值保存到localStorage - 如果页面/浏览器在同一页面上关闭并重新打开，则从
localStorage恢复所有<input>值
但也许有一种由浏览器提供的自动方式
例如，通过向<input>添加属性，类似于<input autofocus>(此处不相关(
问题：<form><input>HTML标签有自动保存功能吗？
据我所知，没有内置的方法可以做到这一点，您应该手动完成；
function persist(thisArg) {
localStorage.setItem(thisArg.id, thisArg.value);
}<input id="test" onchange="persist(this)" />一起保存和检索：
function persist(event) {
localStorage.setItem(event.target.id, event.target.value);
}
// you may use a more specific selector;
document.querySelectorAll("input").forEach((inputEl) => {
inputEl.value = localStorage.getItem(inputEl.id);
inputEl.addEventListener("change", persist);
});<input id="test" />没有自动的方法。你有两个选择：
- 通过代码保存数据
示例：
localStorage.setItem('testObject', JSON.stringify(yourObject)); // for storing data
JSON.parse(localStorage.getItem('yourObject')); // for retrieving data
代码片段：
// for saving data
function saveData(el) {
localStorage.setItem(el.id, JSON.stringify(el.value));
}
// for retrieving data on page load
function getData() {
var inp = document.getElementById("inp");
inp.value = JSON.parse(localStorage.getItem('inp')) || "";
}<body onload="getData()">
<input id="inp" onchange="saveData(this)" />
</body>- 尝试像persisto这样的辅助程序库
基于已接受的答案，这里有一个有用的线性函数：
document.querySelectorAll('input:not([type="submit"])').forEach(elt => { elt.value = localStorage.getItem(elt.name); elt.addEventListener("change", e => { localStorage.setItem(e.target.name, e.target.value); }); });
它将<input>s序列化/反序列化为localStorage，并通过其属性name进行索引。