javascript - 使用本地存储预填表格

Question

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

var select = document.getElementsByTagName('select');
for (var i = 0; i < select.length; i++){
    select[i].value = localStorage.getItem(i);
}
jQuery("select").change(function () {
    for (var i = 0; i < select.length; i++){
        localStorage.setItem(i, select[i].value);
    }
});

我对所有 “input” 标签重复这个。问题是 select 值也会传递给 text 和 slider — 反之亦然(即如果我为 text 输入值 和 slider，它们会覆盖 select 值，除非它们留空)。

我的最终目标是保存每个表单域的最新值，这样当我刷新页面时我的条目就不会丢失。

Answer 1

创建一个代表您保存的值的单个 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);
}

那样的话，您只需在本地存储中创建一个条目，并且每个条目类型都截然不同。然后，要获取值，只需反向执行相同的操作即可:

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