如何使用 javascript 或 jquery 将输入值存储在 Web 本地存储中？

Question

我有如下输入。 我想在页面刷新后保持它的值。 请注意，我有 name 属性，而不是 class 或 ID。

<input type="text" name="name" onkeyup="saveValue(event)"/> 
<input type="text" name="age" onkeyup="saveValue(event)"/> 

<script type="text/javascript">
var nameArr = ["name"];
nameArr.forEach(function(el){
  document.getElementsByName(el)[0].value = getSavedValue(el);  
})

function saveValue(e) {
  var name = e.target.name;
  var val = e.target.value;
  localStorage.setItem(name, val);
}

function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
    return "";
  }
  return localStorage.getItem(v);
}
</script>

它只适用于 1 个输入。我想要一个适用于无限数量输入的东西。

Answer 1

将saveValue的参数改为event：

<input type="text" name="name" onkeyup="saveValue(event)"/>

由于有很多不同名称的元素，所以维护一个数组：

var nameArr = ["name"]; // Add more elements here
nameArr.forEach(function(el){
  document.getElementsByName(el)[0].value = getSavedValue(el);  
})

在saveValue 内部使用e.target，而不是e

var name = e.target.name;
var val = e.target.value;

这些应该可以使代码正常工作。这是一个有效的Codepen

Answer 2

document.getElementsByName("name") 返回一个数组。 如果您确定只有一个名为“name”的元素 然后使用

document.getElementsByName("name")[0].value = getSavedValue("name");