How can I store an input value in web local storege using javascript or jquery?

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.

Possible duplicate of [Save data to local storage](https://stackoverflow.com/questions/23743862/save-data-to-local-storage) — Charlie, May 26 '19 at 11:46

score 0 · Answer 1 · answered May 26 '19 at 10:05

0

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");

answered May 26 '19 at 10:05

Pavithra Ravichandran

55
4

there are more inputs like this and that didn't work properly – hamed dehghan May 26 '19 at 10:13
Can you post the entire code? so that we will be able to find out the issue – Pavithra Ravichandran May 26 '19 at 19:31

score 0 · Accepted Answer · answered May 26 '19 at 10:50

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

How can I store an input value in web local storege using javascript or jquery?

2 Answers2