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

Question

I have an input like below. I want to keep its value after the page is refreshed. notice that I have the name attribute, not class or 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>

it only works for 1 input.I want something that works on unlimited number of inputs.

Answer 1

document.getElementsByName("name") returns an array. if you are sure that there is only one element with the name 'name' then use

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

Answer 2

Change parameter of saveValue to event :

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

Since there are many elements with different names, maintain an array:

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

Inside saveValue use e.target , instead of e

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

These should get the code working. Here's a working Codepen