HTML页面Cookie显示undefined问题求助：用户数据展示异常

问题场景 #

现有一个三步表单流程：

1. registration.html收集用户基础数据，通过URL参数传递至interests.html
2. interests.html通过隐藏字段接收基础数据，同时收集用户兴趣数据，表单提交时将所有数据存入Cookie
3. confirm.html读取Cookie并展示合并后的用户信息，但页面显示undefined，无法正常展示数据

核心问题分析 #

出现undefined的主要原因集中在三个环节：

• interests.html中的隐藏字段未设置正确的name属性，导致存Cookie时键名为undefined
• 重复的DOMContentLoaded监听可能引发逻辑执行顺序异常
• confirm.html的Cookie解析逻辑存在漏洞，无法处理值中包含=的情况，或无效Cookie

修复步骤与代码修改 #

1. 完善interests.html的隐藏字段配置 #

确保所有隐藏字段都设置了与参数名一致的name属性，示例：

<input type="hidden" id="hiddenUserName" name="userName">
<input type="hidden" id="hiddenPassword" name="password">
<input type="hidden" id="hiddenPasswordVerify" name="passwordVerify">
<input type="hidden" id="hiddenFirstName" name="firstName">
<input type="hidden" id="hiddenLastName" name="lastName">
<input type="hidden" id="hiddenEmail" name="email">
<input type="hidden" id="hiddenPhoneNumber" name="phoneNumber">

没有name属性的表单元素，在遍历formElements时element.name会为空，最终生成键名为undefined的Cookie。

2. 重构interests.html的JavaScript逻辑 #

合并重复的DOMContentLoaded监听，增加空值与字段有效性判断：

<script>
function sanitizeInput(input) {
    return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

document.addEventListener("DOMContentLoaded", function() {
    // 填充隐藏字段
    const queryParams = new URLSearchParams(window.location.search);
    document.getElementById("hiddenUserName").value = queryParams.get("userName") || "";
    document.getElementById("hiddenPassword").value = queryParams.get("password") || "";
    document.getElementById("hiddenPasswordVerify").value = queryParams.get("passwordVerify") || "";
    document.getElementById("hiddenFirstName").value = queryParams.get("firstName") || "";
    document.getElementById("hiddenLastName").value = queryParams.get("lastName") || "";
    document.getElementById("hiddenEmail").value = queryParams.get("email") || "";
    document.getElementById("hiddenPhoneNumber").value = queryParams.get("phoneNumber") || "";

    // 表单提交处理
    const interestsForm = document.getElementById("interestsForm");
    interestsForm.addEventListener("submit", function(event) {
        const formElements = interestsForm.elements;
        for (const element of formElements) {
            // 跳过提交按钮，且仅处理有name属性的字段
            if (element.type !== "submit" && element.name) {
                const sanitizedValue = sanitizeInput(element.value || "");
                const cookieValue = encodeURIComponent(sanitizedValue);
                document.cookie = `${element.name}=${cookieValue}; path=/`;
            }
        }
    });
});
</script>

• 合并监听确保隐藏字段填充完成后再绑定提交事件
• 用|| ""处理参数为空的情况，避免存入undefined值
• 增加element.name判断，防止生成无效Cookie

3. 修复confirm.html的Cookie解析逻辑 #

修改Cookie分割方式，避免值中包含=导致的解析错误：

<script>
document.addEventListener("DOMContentLoaded", function() {
    const userInfoList = document.getElementById("userInfo");
    const cookies = document.cookie.split("; ");
    
    for (const cookie of cookies) {
        const eqIndex = cookie.indexOf("=");
        // 跳过格式无效的Cookie
        if (eqIndex === -1) continue;
        
        const name = cookie.slice(0, eqIndex);
        const value = cookie.slice(eqIndex + 1);
        userInfoList.innerHTML += `<li><strong>${name}:</strong> ${decodeURIComponent(value)}</li>`;
    }
});
</script>

通过indexOf定位第一个=的位置，确保键名和值的正确拆分，避免出现value为undefined的情况。

4. 验证registration.html的表单配置 #

确保registration.html的表单使用GET方法提交，且字段name与interests.html中读取的参数名一致：

<form action="interests.html" method="GET">
    <label>用户名: <input type="text" name="userName" required></label>
    <!-- 其他字段的name需与interests.html中queryParams.get的名称对应 -->
    <button type="submit">下一步</button>
</form>

验证流程 #

1. 提交registration.html表单后，检查URL是否包含正确的参数（如?userName=test&email=test@example.com）
2. 在interests.html中打开浏览器开发者工具，查看隐藏字段的value是否已正确填充
3. 提交interests.html表单后，在开发者工具的Application > Cookies中确认所有字段的Cookie已生成，且键名正确
4. 打开confirm.html，验证所有用户信息是否正常展示

内容的提问来源于stack exchange，提问作者Leandra McGriff