I am trying to push my data variable into the local storage. Why is it undefined?

Question

I am pretty new to using localStorage, so excuse my ignorance and the potential repetition of this question. I couldn't get any answer yet.

I have a form with a lot of input tags. I am storing their values in a var called data var data = document.querySelectorAll( "input" ).value;

when I do window.localStorage.setItem('data', JSON.stringify(data.value)) it stores data in the storage with a value of undefined. I get that my var data isn't really catching all the user input values, but I couldn't figure out how to do it.

My intention is to make var data an object that stores other objects that have the values of the input fields. then push this data to the localStorage. WITH PURE JS

What you're doing is essentially `input.value.value` which is `undefined`. Your `data` is already the value, no need to add `.value` again. — kemicofa ghost, Jan 07 '19 at 14:21
`querySelectorAll()` returns a list of elements; it doesn't have a `.value`. Also, the value of an input is usually text; there's no need to `stringify()`. Rule of thumb: do not use `JSON.parse()` or `JSON.stringify()` unless you understand what those commands do. — , Jan 07 '19 at 14:21
https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Jan 07 '19 at 14:24
I am asked to store all the input fields values in an object called data — Mustafa Anas, Jan 07 '19 at 14:30
Did you read my comment? You need to iterate over the nodelist: https://jsfiddle.net/khrismuc/y9n8dj1r/ — , Jan 07 '19 at 14:31
You need to loop over all the values and set them in a format that can be saved... — epascarello, Jan 07 '19 at 14:31
but I have more than two fields and with different datatypes — Mustafa Anas, Jan 07 '19 at 14:33
https://stackoverflow.com/questions/17087636/how-to-save-data-from-a-form-with-html5-local-storage — , Jan 07 '19 at 14:36
I updated my fiddle to show how to store / restore a single data object. It works for text and numbers. Checkboxes and the like need more code. — , Jan 07 '19 at 14:50
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Heretic Monkey, Oct 01 '21 at 23:58

benvc · Answer 1 · 2021-10-01T23:38:59.937

As noted in the comments, you need to loop over your inputs to get the values and then store them in localStorage. For example:

const inputs = document.querySelectorAll('input');
const data = [];
for (const input of inputs) {
  data.push(input.value);
}

window.localStorage.setItem('data', data);

Also, if you are really trying to store the data as JSON (perhaps why you were trying to use JSON.stringify()), then you could do something like the following (although it would be better if your input elements had unique id or name values you could use as keys rather than just the index of the selected input as in the example below).

const inputs = document.querySelectorAll('input');
const data = {};
inputs.forEach((input, i) => {
  data[i] = input.value;
});

window.localStorage.setItem('data', JSON.stringify(data));

score 0 · Accepted Answer · answered Jan 07 '19 at 15:14

Try this code, it writes to localStorage and reads from it to console (stackoverflow insert code tool doesn't allow to work with localStorage, that is why the code is in different JS sandbox): https://plnkr.co/edit/0e1R1aDTneQ1RA0Dvasj?p=preview

code:

<!DOCTYPE html>
<html>
<body>
  <form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
  </form> 
  
  <script>
    let data = document.querySelectorAll("input");
    let formData=[];
    
    console.log('data', data);
    
    for(let i=0; i<data.length; i++){
      formData.push({ name: data[i].name, value: data[i].value })
    }
    
    console.log("formData for localStorage", formData)
    
    localStorage.setItem('formData', JSON.stringify(formData));
    let output = localStorage.getItem('formData');
    
    console.log('output', JSON.parse(output));

  </script>
</body>
</html>

I am trying to push my data variable into the local storage. Why is it undefined?

2 Answers2