如何将register函数捕获的表单数据存入user对象并保存至sessionStorage？

问题需求 #

修改现有注册表单的JavaScript代码，将register函数捕获的所有表单数据整合为user对象，并将该对象存储到sessionStorage中。

修正后的完整代码 #

<div id="body-container">
    <form id="user" action="login.html">
        <input type="text" id="firstname" placeholder="Enter your First Name">
        <input type="text" id="lastname" placeholder="Enter your Last Name">
        <input type="number" id="age" placeholder="Enter your Age">
        <!-- 修正原代码select标签的语法错误（多了一个引号） -->
        <select id="gender" name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        <input type="text" id="username" placeholder="Enter your Username">
        <input type="password" id="password" placeholder="Enter your Password">
        <br> <br>
        <input type="submit" value="Submit" onclick="register(event)">
    </form> 
</div>

<footer id="footer">
    <p>Created on November 2019, by <a href="http://Jon_Doe.com">John Doe</a></p>
</footer>

<script>
     function register(event){
         // 阻止表单默认提交跳转，确保数据存储逻辑执行完成
         event.preventDefault();
         
         // 捕获所有表单字段值
         var firstname = document.getElementById("firstname").value;
         var lastname = document.getElementById("lastname").value;
         var age = document.getElementById("age").value;
         var gender = document.getElementById("gender").value;
         var username = document.getElementById("username").value;
         var password = document.getElementById("password").value;

         // 整合为user对象，年龄转为数字类型
         const user = {
             firstname,
             lastname,
             age: parseInt(age),
             gender,
             username,
             password
         };

         // 将对象转为JSON字符串存入sessionStorage
         sessionStorage.setItem('registeredUser', JSON.stringify(user));

         // 可选：验证存储结果，可根据需求删除
         console.log('已存储用户数据:', JSON.parse(sessionStorage.getItem('registeredUser')));

         // 若需要提交后跳转登录页，取消下方注释
         // window.location.href = 'login.html';
     }
</script>

关键步骤说明 #

• 修复语法问题：修正原代码中<select>标签的多余引号，避免DOM元素获取失败。
• 拦截默认行为：通过event.preventDefault()阻止表单提交后的页面跳转，保证数据存储逻辑完整执行。
• 构建用户对象：将所有表单字段（含原代码遗漏的username和password）整合为对象，把年龄转为数字类型以符合数据规范。
• 存储到sessionStorage：利用JSON.stringify()将对象转为字符串（sessionStorage仅支持字符串存储），后续读取时可通过JSON.parse()还原为对象。

内容的提问来源于stack exchange，提问作者Pieter Zeelie