Question

刷新页面后，我尝试使用本地存储来记住输入的值。但是我的代码不起作用。

这是HTML代码

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

这是javascript

<script type="text/javascript">
var nameArr = ["name"];
var inputs = document.getElementsByName('name');
inputs.forEach(function(el){
    el.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>

如果有解决此问题的方法，请告诉我。如果有办法用jquery做到这一点，我将很高兴告诉我。

Answer 1

在代码上，您将输入对象作为参数而不是其名称（或值；您选择）作为参数传递。由于localStorage仅存储字符串键值对，因此在您尝试查找作为对象的键时将无法使用。

在forEach中而不是：

el.value = getSavedValue(el);

设置：

el.value = getSavedValue(el.name);

或让“ getSavedValue”函数接受一个对象作为参数，但是要访问localStorage，必须传递一个字符串作为键。

Answer 2

这是几件事情。首先，不要使用onkeyup来代替onblur，这样只有在将焦点从元素移开时，值才会保存在存储器中。

在这种情况下，第二个使用公共类inputs并为每个元素分别提供name。

然后获取具有相同类的所有元素，对其进行迭代，并使用name获取getAttribute属性的值。使用此值检查localStorage

中是否存在密钥

var nameArr = ["name"];
var inputs = [...document.getElementsByClassName('inputs')];
inputs.forEach(function(el) {
  console.log()
  el.value = getSavedValue(el.getAttribute('name'));
})

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);
}

<input type="text" class='inputs' name="firstName" onblur="saveValue(event)" />
<input type="text" class='inputs' name="lastName" onblur="saveValue(event)" />
<input type="text" class='inputs' name="age" onblur="saveValue(event)" />

如何通过使用本地存储来记住输入值？

2 个答案: