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

我是S.O和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>