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

Question

 <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.

Answer 1

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.

Answer 2

You looking for localStorage methods: getItem(key), setItem(key, value). A little late but one thing i noticed. Maybe it's still helpful for your example. if there are so many elements i would do it through a loop. like for example:

<div id="confirm_fname">First Name</div>
<div id="confirm_lname">Last Name</div>
<div id="confirm_email">Email</div>
...

<script>
const keyNames = [
  {k1: 'confirm_fname', k2: 'fname'},
  {k1: 'confirm_lname', k2: 'lname'},
  {k1: 'confirm_email', k2: 'email'}
]

keyNames.map(function (key) {
  sessionStorage.setItem(key.k2, Math.random()); // set to localStorage  
  document.getElementById(key.k1).textContent = sessionStorage.getItem(key.k2); // get from localStorage
})
</script>

It's make the code shorter and you can easily handel the elements.