How do I auto-fill a form using session storage?-CodePudding

<label for="streetname">Street Address</label>
<input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />

function getBooking() {
  if (sessionStorage.fname != undefined) {
    document.getElementById("confirm_fname").textContent = sessionStorage.fname;
    document.getElementById("confirm_lname").textContent = sessionStorage.lname;
    document.getElementById("confirm_email").textContent = sessionStorage.email;
    document.getElementById("confirm_phone").textContent = sessionStorage.phone;
    document.getElementById("confirm_start").textContent = sessionStorage.start;
    document.getElementById("confirm_streetname").textContent = sessionStorage.streetname;
    document.getElementById("confirm_suburb").textContent = sessionStorage.suburb;
    document.getElementById("confirm_state").textContent = sessionStorage.state;
    document.getElementById("confirm_postcode").textContent = sessionStorage.postcode;
    document.getElementById("confirm_skill").textContent = sessionStorage.skill;
    document.getElementById("confirm_other").textContent = sessionStorage.other;
    document.getElementById("confirm_otherbox").textContent = sessionStorage.otherbox;
    
    
    document.getElementById("a_fname").value = sessionStorage.fname;
    document.getElementById("a_lname").value = sessionStorage.lname;
    document.getElementById("a_email").value = sessionStorage.email;
    document.getElementById("a_phone").value = sessionStorage.phone;
    document.getElementById("a_start").value = sessionStorage.start;
    document.getElementById("a_streetname").value = sessionStorage.streetname;
    document.getElementById("a_suburb").value = sessionStorage.suburb;
    document.getElementById("a_state").value = sessionStorage.state;
    document.getElementById("a_postcode").value = sessionStorage.postcode;
    document.getElementById("a_skill").value = sessionStorage.skill;
    document.getElementById("a_other").value = sessionStorage.other;
    document.getElementById("a_otherbox").value = sessionStorage.otherbox;
  }
 }

How can I, using an external JavaScript file, use session storage to auto-fill a form if the user had already filled out the form in the same browser session? I've already got code that stores the values in session storage if the form is validated correctly, so how would I go about doing this?

If more or less information is needed, please let me know.

Note: no jQuery or inline Javascript please.

CodePudding user response：

Both sessionStorage and localStorage have functions called getItem for retrieving data and setItem for storing data.
Along with some other useful functions.

So, for this case, it seems you need:

document.getElementById("a_fname").value = sessionStorage.getItem("fname");

And same goes for all the rest.

Check this out for more information.