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

Question

我试图保存从表单提交的值并使用 Js 将它们添加到表中。我还尝试将这些值保存在 localStorage 中但是 localStorage 抛出“未定义”错误，我不知道问题出在哪里因为我对尝试 localStorage 还很陌生。

请看一下我的代码，给我一些建议。提前致谢。

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>

错误

Answer 1

您的代码尝试将值保存到 localStorage，但您尚未从表单中检索它们:

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

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

    ...
}

您需要从输入中检索值。

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

<小时/>

如果您在代码顶部添加'use strict';，您将看到一些有用的ReferenceErrors。