自动将所有输入值保存到localStorage并在页面重新加载时将其恢复 [英] Auto-save all inputs value to localStorage and restore them on page reload

问题描述

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

I'm about to code, in Javascript some code (involving looping on each <input> and adding listeners):

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

• allowing, after keypress, to save all <input> values to localStorage
• restore all <input> values from localStorage in the case the page/browser has been closed and reopened on the same page

但是浏览器可能会提供一种自动方式吗?

例如通过向<input>添加类似于<input autofocus>的属性(此处无关)

e.g. by adding an attribute to <input>, similar to <input autofocus> (which is not related here)

问题:<form> <input> HTML标记是否具有自动保存功能?

Question: is there an autosave feature of <form> <input> HTML tags?

推荐答案

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

As far as I know, there is no built-in way to do that, you should do it manually;

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并在页面重新加载时将其恢复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！