Localstorage giving Undefined result when I try to save values from a submitted form

Question

I was trying to save submitted values from the form and add them into a table using Js.I am also trying to save those values in localStorage However the localStorage throws "Undefined" error, Which I have no clue where is the problem as I am quite new to try localStorage.

Please take a look to my code give me some advice. Appreciate in advance.

HTML

if (localStorage) {

  document.getElementById('form2').addEventListener('click', function() {
    //save the values in localStorage
    localStorage.setItem('location', location);
    localStorage.setItem('activity', activity);
    localStorage.setItem('startTime', startTime);
    localStorage.setItem('endTime', endTime);
    localStorage.setItem('date', date);
    localStorage.setItem('distance', distance);

    //Retrive Workout History
    var location = localStorage.getItem('location');
    var activity = localStorage.getItem('activity');
    var startTime = localStorage.getItem('startTime');
    var endTime = localStorage.getItem('endTime');
    var date = localStorage.getItem('date');
    var distance = localStorage.getItem('distance');


    if (location != "undefined" || location != "null" || activity != "undefined" || activity != "null" || startTime != "undefined" || startTime != "null" || endTime != "undefined" || endTime != "null" || date != "undefined" || date != "null" || distance != "undefined" || distance != "null") {

      var table = document.getElementById('data');

      var row = table.insertRow();
      var cell1 = row.insertCell();
      var cell2 = row.insertCell();
      var cell3 = row.insertCell();
      var cell4 = row.insertCell();
      var cell5 = row.insertCell();
      var cell6 = row.insertCell();

      cell1.innerHTML = location;
      cell2.innerHTML = activity;
      cell3.innerHTML = startTime;
      cell4.innerHTML = endTime;
      cell5.innerHTML = date;
      cell6.innerHTML = distance;
      console.log(localStorage.getItem('location'));
    }
  });

}

<form name="form2" id="form2" action="#" method="post" onclick="return secondFormValidation();">
  <div class="form-group row">
    <label for="location" class="col-md-2 col-form-label">Location</label>
    <div class="col-md-10">
      <input type="text" class="form-control" id="location" name="location" placeholder="Location">

    </div>
  </div>
  <div class="form-group row">
    <label for="activity" class="col-md-2 col-form-label"> Select Activity</label>

    <div class=" col-md-10">
      <select class="form-control" id="activity">
                      <option value="-1" selected required>Select Activity</option>
                      <option value="1">Cycling</option>
                      <option value="2">Nordic Walking</option>
                      <option value="3">Road Bike</option>
                      <option value="4">Running</option>
                      <option value="5">Swimming</option>
                      <option value="6">Walking</option>
    
                    </select>
    </div>

  </div>
  <div class="form-group row">
    <label for="startTime" class="col-md-2 col-form-label">Start Time</label>
    <div class="col-md-10">
      <input type="time" class="form-control" id="startTime" name="startTime" placeholder="startTime">

    </div>
  </div>
  <div class="form-group row">
    <label for="endTime" class="col-md-2 col-form-label">End Time</label>
    <div class="col-md-10">
      <input type="time" class="form-control" id="endTime" name="endTime" placeholder="endTime">

    </div>
  </div>

  <div class="form-group row">
    <label for="date" class="col-md-2 col-form-label">Date</label>
    <div class="col-md-10">
      <input type="date" class="form-control" id="date" name="date" placeholder="Date ">
    </div>
  </div>
  <div class="form-group row">
    <label for="distance" class="col-md-2 col-form-label">Distance</label>
    <div class="col-md-10">
      <input type="distance" class="form-control" id="distance" name="distance" placeholder="Distance ">
    </div>
  </div>


  <div class="form-group row">
    <div class="offset-md-2 col-md-10">
      <button id="saveWork" type="button" class="btn btn-warning" onclick=" insertWorkout()">
                      Save workout
                    </button>

    </div>
  </div>
</form>

Error

Answer 1

Your code attempts to save the values to localStorage, but you haven't retrieved them from the form, yet:

document.getElementById('form2').addEventListener('click' , function () {

    localStorage.setItem('location' , location);
    console.log(location); // <- undefined

    ...
}

You need to retrieve the values from the inputs.

var location = document.querySelector('input[name="location"]').value
localStorage.setItem('location' , location);

---

If you add 'use strict'; at the top of your code, you will see several helpful ReferenceErrors.