How to store data in a form so on page refresh the fields are still populated

Question

I'm new to S.O and javascript. I am working on a final year project for a e-commerce website and have ran into a dead end on saving data from a form into local storage. My code is below, i really don't see where i have gone wrong. all help is appreciated.

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

First of all, not in your code you use:

document.getElemenyById(...);
localstorage.setItem()

instead of (note the Elemeny vs. Element, s vs. S):

document.getElementById(...);
localStorage.setItem();

---

As for a full solution:

You can use various local storage to store this data in the browser. You can do something like this when the page is about to reload:

window.onbeforeunload = function() {
    var fran_name = document.getElementById("fran_name"); 
    var name = document.getElementById("name");
    // ...

    localStorage.setItem("fran_name", fran_name.value);
    localStorage.setItem("name", name.value);
    // ...
}

localstorage works synchronously so this will work here.

At page load you can check:

window.onload = function() {

    var name = localStorage.getItem(name);
    if (name !== null) document.getElemenyById("name").value = name;

    // ...
}

getItem will return null` if the data does not exist.

Use sessionStorage instead of localStorage if you want to store temporarily - until the browser is closed.

---

Here's a simplified version of your form, with complete working code. save it as a .html file:

<html>
    <head>
        <script type="text/javascript">
            // For saving data:
            window.onbeforeunload = function() {
                var name = document.getElementById("name");
                // ...
                localStorage.setItem("name", name.value);
                // ...
            }
            // For loading data:
            window.onload = function() {
                var name = localStorage.getItem(name);
                if (name !== null) document.getElemenyById("name").value = name;
                // ...
            }
        </script>
        <title></title>
    </head>
    <body>
        <div id="section">
            <form id="franchiseForm" action="Order_confirmation.php" method="POST">
                <div class="field">
                    <label for="name">Name</label>
                    <input type="text" name="franc_name" id="name" placeholder="Joe Blogs" required tabindex="2">
                    <br>
                </div>
            </form>
        </div>
    </body>
</html>

Answer 2

If you are able to use JQuery and JQuery Cookie, you can save the data in a cookie:

var frn = $(#fran_name).val();
$.cookie("fran_name", frn);

Then on pageload you get the cookie data and then insert it into the field:

$(document).ready(function(){
    var cookie = $.cookie("fran_name");
    $('#fran_name').val(cookie);
});

Answer 3

The main thing is, check your console for this error:

Uncaught ReferenceError: localstorage is not defined.

Change your code. It is localStorage and not localstorage. That's a capital S.

And a big mistake here. It is getElementById and not 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");

You have too many mistakes! Elemeny != Element.

Looks like this is stopping your code from executing:

  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");
  }

You don't have a variable named email. And moreover, you are trying to set the value of an undefined element variable email, which doesn't have a property named value, that prevents all your scripts from executing.