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

Question

我即将编写代码，使用 Javascript 编写一些代码(涉及在每个 <input> 上循环并添加监听器):

• 允许在按键后保存所有<input>值为 localStorage
• 恢复所有<input>来自 localStorage 的值如果页面/浏览器已关闭并在同一页面上重新打开

但浏览器是否提供了一种自动方式？

例如通过向 <input> 添加属性，类似于<input autofocus> (这里不相关)

问题:<form>是否有自动保存功能？ <input> HTML 标签？

Answer 1

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

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" />