使用localstorage onsubmit保存表单

Question

我是整个本地存储的新手，但我所遵循的所有其他教程和堆栈溢出页面都让我无处可去。我正在尝试将用户详细信息保存到localstorage中，并通过控制台查看它们。提交很好，它完美地调用了函数，但每当我看到控制台时，它都不会显示任何内容，错误或“null”。

 function onSubmitForm(){
           localStorage.clear();
           /*What i think this does is set the value to whatever the user 
has submitted in the form and then call it to the console for me to see*/
           var input = document.getElementById("firstname");
           localStorage.setItem("firstname", input.value); 
           var storedValue = localStorage.getItem("firstname"); 
           
           /*another failed attempt, i do not have these both running at the same time*/
           console.log(localStorage.getItem("firstname"));
           console.log(localStorage.getItem("lastname"));
           console.log(localStorage.getItem("email"));
           console.log(localStorage.getItem("enquiry"));
           
/*This is the clear the form of all text*/
        var form = document.getElementById("contactForm");
        form.reset();
        alert("Your enquiry has gone through");
    }

<!--I hope to get these all to store but just the first name will be enough for me right now-->

<form action="" name="contactForm" id="contactForm" onSubmit="onSubmitForm()">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com"/>

    <label for="enquiry">Enquiry</label>
    <input type="text" name="enquiry" id="enquiry" placeholder="Your enquiry here:"/>

    <button type="submit">Submit</button>

  </form>