如何在表单中存储数据,以便页面刷新字段仍然填充

Question

我是SO和javascript的新手.我正在为一个电子商务网站开展最后一年的项目,并且在将数据从表单保存到本地存储方面已经陷入了死胡同.我的代码在下面,我真的不知道我哪里出错了.所有的帮助表示赞赏.

window.onload = function() {
  // Check for LocalStorage support.
  if (localStorage) {
    // Populate the form fields
    populateForm();

    // Get the form
    var form = document.getElementById("franchiseForm");

    // Event listener for when the bookings form is submitted.
    form.addEventListener("submit", function(e) {
      saveData(form);
    });
  }
}

// Save the form data in LocalStorage.
function saveData() {
  //fetch sava(data)
  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");

  //store the values
  localStorage.setItem("fran_name", fran_name.value);
  localStorage.setItem("name", name.value);
  localStorage.setItem("address1", address1.value);
  localStorage.setItem("address2", address2.value);
  localStorage.setItem("city", city.value);
  localStorage.setItem("pcode", pcode.value);
  localStorage.setItem("phone", phone.value);
}

// Attempt to populate the form using data stored in LocalStorage.
function populateForm() {
  // Fetch the input elements.
  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");

  //retrieve saved data and update the values of the form.
  if (localStorage.getItem("fran_name") != null) {
    name.value = localStorage.getItem("fran_name");
  }

  if (localStorage.getItem("name") != null) {
    phone.value = localStorage.getItem("name");
  }

  if (localStorage.getItem("address1") != null) {
    email.value = localStorage.getItem("address1");
  }
  if (localStorage.getItem("address2") != null) {
    email.value = localStorage.getItem("address12");
  }
  if (localStorage.getItem("city") != null) {
    email.value = localStorage.getItem("city");
  }
  if (localStorage.getItem("pcode") != null) {
    email.value = localStorage.getItem("pcode");
  }
  if (localStorage.getItem("phone") != null) {
    email.value = localStorage.getItem("phone");
  }
}
window.onload = function(){
  if (localstorage){
    //populate the form fields
    populateform(form);
  }
}

<div id="section">  

  <form id="franchiseForm" action ="Order_confirmation.php" method="POST">

    <div class="field">
      <label for="fran_name">Franchise Name</label>
      <input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" 
             autofocus required tabindex="1">
      <br>

      <label for="name">Name</label>
      <input type="text" name="franc_name" id="name" placeholder="Joe Blogs" required tabindex="2">
      <br>

      <label for="address"> Address</label>
      <input type="text" name="franc_address" id="address1" placeholder="Address Line 1" tanindex="3">
      <input type="text"  id="address2" placeholder="Address Line 2" tabindex="4">
      <input type="text"  id="city" placeholder="Town/City" tabindex="5">
      <input type="text"  id="pcode" placeholder="Postcode" tabindex="6">
      <br>

      <label for="phone" > Phone Number</label>
      <input type="tel" name="franc_phone" id="phone" placeholder="Customer service number" min="10" maxlength="11" pattern="[0-9]{3}[-][0-9]{4}[-][0-9]{4}" 
             required title="Please provide your customer service number in the following format: 000-0000-0000" tabindex="7">
    </div>

    <div class="field">
      <input type="submit" id="submit" value="submit">
    </div>
  </form>

Answer 1

最重要的是,检查您的控制台是否有此错误:

未捕获的ReferenceError:localstorage未定义.

改变你的代码.它是,localStorage而不是localstorage.那是一个资本S.

这是一个很大的错误.它是,getElementById而不是getElemenyById:

  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");

你有太多的错误!Elemeny!= Element.

看起来这会阻止您的代码执行:

  if (localStorage.getItem("address1") != null) {
    email.value = localStorage.getItem("address1");
  }
  if (localStorage.getItem("address2") != null) {
    email.value = localStorage.getItem("address12");
  }
  if (localStorage.getItem("city") != null) {
    email.value = localStorage.getItem("city");
  }
  if (localStorage.getItem("pcode") != null) {
    email.value = localStorage.getItem("pcode");
  }
  if (localStorage.getItem("phone") != null) {
    email.value = localStorage.getItem("phone");
  }

您没有名为的变量email.而且,您正在尝试设置未定义的元素变量的值,该变量email没有名为的属性value,从而阻止所有脚本执行.