如何在表单验证通过后跳转页面并传递参数修改目标页HTML元素

• 语法错误：原代码中document.querySelector('loginName')的选择器缺少ID标识前缀#，正确写法应为document.querySelector('#loginName')，但即使修正该语法问题也无法达到预期效果，因为#loginName是属于login.html的元素，当前表单页面不存在该元素，修改不生效。
• 核心逻辑错误：浏览器页面跳转后，原页面的JS运行上下文、变量状态、DOM修改都会被完全销毁，无法直接作用于新打开的login.html页面，必须通过跨页面数据传递的方式把用户名传到目标页面，再由目标页面自行渲染。

以下两种方案均为纯前端实现，不需要后端服务支持：

方案1：URL参数传递（最简单直观） #

第一步：修改原页面的example.js代码 #

把提交事件的if判断块内的代码替换为如下内容：

const form = document.getElementById('form')
const formName = document.getElementById('name')
const formPass = document.getElementById('pass')

const yourName = "John"
const yourPass = "Doe"

form.addEventListener('submit', function(e){
    e.preventDefault()
    if (formName.value == yourName && formPass.value == yourPass) {
        // 对用户名编码后拼接到跳转URL的查询参数中
        window.location.href = `login.html?username=${encodeURIComponent(yourName)}`;
    }
})

第二步：修改login.html代码，新增逻辑读取参数并渲染 #

在login.html的</body>标签之前添加如下脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="loginName"></h1>
    <script>
        // 解析当前URL的查询参数
        const urlParams = new URLSearchParams(window.location.search)
        const loginUsername = urlParams.get('username')
        // 拿到用户名后写入h1标签
        if (loginUsername) {
            document.getElementById('loginName').textContent = loginUsername
        }
    </script>
</body>
</html>

方案2：LocalStorage存储（不暴露参数到地址栏） #

第一步：修改原页面的example.js代码 #

提交事件的if判断块替换为如下内容：

form.addEventListener('submit', function(e){
    e.preventDefault()
    if (formName.value == yourName && formPass.value == yourPass) {
        // 将用户名存入本地存储
        localStorage.setItem('login_username', yourName)
        window.location.href = 'login.html'
    }
})

第二步：修改login.html代码，读取本地存储值渲染 #

在login.html的</body>标签之前添加如下脚本：

<h1 id="loginName"></h1>
<script>
    const loginUsername = localStorage.getItem('login_username')
    if (loginUsername) {
        document.getElementById('loginName').textContent = loginUsername
        // 用完后删除存储的用户名，避免残留
        localStorage.removeItem('login_username')
    }
</script>

• 本实现仅作为前端练习使用，实际生产环境中不可将用户名、密码硬编码在前端JS代码中，密码校验必须交由后端服务处理。
• 敏感信息不要使用URL参数或者LocalStorage长期存储，避免信息泄露。

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