页面加载时读取query string显示用户名的JS&HTML实现咨询

要实现页面加载时读取URL参数设置用户名，同时保留刷新后的数据持久化，需要调整以下几点：

1. 替换document.write为更新页面指定元素的方式，避免覆盖整个页面
2. 实现URL query string的解析逻辑，优先读取URL中的用户名参数
3. 优化页面加载事件的处理逻辑，确保DOM加载完成后再执行操作

完整代码实现 #

HTML 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态问候页面</title>
</head>
<body>
    <h1 id="greeting"></h1>
    <input type="text" id="userName" placeholder="输入你的名字">
    <button onclick="setUserName()">设置名字</button>

    <script>
        // 解析URL中的query参数
        function getQueryParam(paramName) {
            const params = new URLSearchParams(window.location.search);
            return params.get(paramName);
        }

        // 保存用户名到localStorage
        function setUserName() {
            const userName = document.getElementById("userName").value.trim();
            if (userName) {
                localStorage.setItem("userName", userName);
                updateGreeting(userName);
            }
        }

        // 从localStorage获取用户名
        function getUserName() {
            return localStorage.getItem("userName");
        }

        // 更新页面问候语
        function updateGreeting(userName) {
            const greetingEl = document.getElementById("greeting");
            greetingEl.textContent = userName ? `Hello, ${userName}` : "Hello, world!";
        }

        // 页面加载时的处理逻辑
        function initPage() {
            // 优先读取URL中的name参数
            const urlUserName = getQueryParam("name");
            if (urlUserName) {
                localStorage.setItem("userName", urlUserName);
                updateGreeting(urlUserName);
                // 可选：同步输入框内容为URL中的名字
                document.getElementById("userName").value = urlUserName;
            } else {
                // 没有URL参数时读取localStorage中的保存值
                const savedName = getUserName();
                updateGreeting(savedName);
                if (savedName) {
                    document.getElementById("userName").value = savedName;
                }
            }
        }

        // 页面DOM加载完成后执行初始化
        document.addEventListener("DOMContentLoaded", initPage);
    </script>
</body>
</html>

关键说明 #

• URL参数解析：使用URLSearchParamsAPI可以简洁地获取URL中的name参数（比如访问http://yourpage.com?name=张三时，会自动读取到"张三"）
• 避免document.write：通过获取页面中的<h1>元素并修改其textContent来更新问候语，不会破坏页面原有结构
• 加载事件优化：使用DOMContentLoaded事件替代body的onload属性，确保DOM完全加载后再执行操作，避免找不到元素的问题
• 优先级逻辑：页面加载时优先使用URL中的用户名，若没有则读取localStorage中的保存值，同时保留按钮修改功能

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