当我尝试从提交的表单中保存值时，本地存储给出未定义的结果

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.