将所有输入值自动保存到 localStorage 并在页面重新加载时恢复它们答案

【问题标题】：Auto-save all inputs value to localStorage and restore them on page reload将所有输入值自动保存到 localStorage 并在页面重新加载时恢复它们
【发布时间】：2020-07-19 22:44:23
【问题描述】：

我即将编写代码，用 Javascript 编写一些代码（包括在每个 <input> 上循环并添加侦听器）：

允许在按键后将所有<input> 值保存到localStorage
在页面/浏览器已关闭并在同一页面上重新打开的情况下，从 localStorage 恢复所有 <input> 值

但也许浏览器提供了一种自动方式？

例如通过给<input>添加一个属性，类似于<input autofocus>（这里不相关）

问题：<form><input> HTML 标签有自动保存功能吗？

【问题讨论】：

标签： javascript html local-storage

【解决方案1】：

据我所知，没有内置方法可以做到这一点，您应该手动完成；

function persist(thisArg) {
  localStorage.setItem(thisArg.id, thisArg.value);
}

&lt;input id="test" onchange="persist(this)" /&gt;

一起坚持和检索：

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);
});

&lt;input id="test" /&gt;

【讨论】：

谢谢。为了将来参考，您是否还可以包含在页面重新加载后从 localStorage 恢复值的代码？
PS @Leonardo event.path[0] 不适用于 Firefox，我认为 event.target 更好，或者使用这个：stackoverflow.com/questions/39245488/…？你怎么看？
@Basj event.target 更合适；我不知道 event.path 没有在 Firefox 中实现；我已经相应地更新了答案
在第二个示例中，您可以在 document 上放置一个侦听器来保存数据，您可以将选择器更新为 input[id] 以确保所有保存的元素都有 ID（为了保存他们通过那个）......否则，你是对的！
@Basj FZs 指出，如果某些输入没有id，那么.setItem(event.target.id,... 中的event.target.id 将是未定义的，并且不会有正确的引用作为key；所以他建议在document.querySelectorAll 中使用id 以确保所有元素在localstorage 中都有正确的key 值

【解决方案2】：

根据接受的答案，这里有一个可能有用的单行：

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 索引。

【讨论】：

【解决方案3】：

没有自动的方法可以做到这一点。你有两个选择：

通过代码保存数据
示例：

localStorage.setItem('testObject', JSON.stringify(yourObject)); // for storing data
JSON.parse(localStorage.getItem('yourObject')); // for retrieving data

代码sn-p：

// 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这样的辅助库

【讨论】：