Javascript 使用本地存储预先填写表格

我正在将JSON中的问题加载到EJS模板中，并希望从localStorage填充每个字段。以下内容保存每个下拉列表、文本和滑块元素的最后一个值：

var select=document.getElementsByTagName（'select'）；
对于（变量i=0；i

我对所有

“input”

标记重复此操作。问题是

选择

值也会传递到

文本

和

滑块

——反之亦然（即，如果我为

文本

和

滑块

输入值，它们会覆盖

选择

值，但保留为空）

---

我的最终目标是保存每个表单字段的最新值，以便在刷新页面时不会丢失我的条目。

创建一个表示已保存值的localStorage条目比为每个字段创建多个条目污染LS要优雅得多。我想推荐如下：

function save() {
  const selects = document.querySelectorAll('select');
  // select other element types
  // ...
  const selectValues = [...selects].map(select => select.value);
  const textValues = [...textInputs].map(textInput => textInput.value);
  const sliderValues = [...sliderInputs].map(sliderInput => sliderInput.value);
  const savedObj = { selectValues, textValues, sliderValues };
  localStorage.savedFormValues = JSON.stringify(savedObj);
}

这样，您只需在localStorage中创建一个条目，并且每个条目类型都非常不同。然后，要获得值，只需反向执行相同的操作：

function populate() {
  const selects = document.querySelectorAll('select');
  // ...
  const { selectValues, textValues, sliderValues } = JSON.parse(localStorage.savedFormValues);
  selectValues.forEach((selectValue, i) => selects[i].value = selectValue);
  // ...

---

嗯，你用的是

i

键。假设您对

输入使用相同的代码，那么肯定会有一些重叠。使用组合键（即，
`select-${i}`
）作为键。