使用Session Storage跨HTML文件存储与显示名称的问题求助

嘿，我来帮你搞定这个存储和显示名称的问题！咱们一步步拆解，先搞定单个页面的输入验证与存储逻辑，再解决跨页面读取的问题。

一、第一个页面：输入验证与存储逻辑（比如index.html） #

首先咱们先把输入、按钮和提示的HTML结构搭好，然后写JS处理点击事件：

<!DOCTYPE html>
<html>
<head>
    <title>输入你的名字</title>
</head>
<body>
    <p id="promptText">你叫什么名字</p>
    <input type="text" id="nameInput" placeholder="请输入名字">
    <button id="enterBtn">enter</button>
    <!-- 如果是同一页面替换显示，就加这个区域 -->
    <div id="nameDisplay" style="margin-top: 20px; display: none;">你的名字是：<span id="userName"></span></div>

    <script>
        // 获取页面元素
        const promptText = document.getElementById('promptText');
        const nameInput = document.getElementById('nameInput');
        const enterBtn = document.getElementById('enterBtn');
        const nameDisplay = document.getElementById('nameDisplay');
        const userNameSpan = document.getElementById('userName');

        // 监听按钮点击事件
        enterBtn.addEventListener('click', function() {
            const inputValue = nameInput.value.trim(); // 去掉首尾空格，避免空输入

            if (inputValue === "") {
                // 空输入：修改提示文本，阻止后续操作
                promptText.textContent = "请输入你的名字";
                return;
            }

            // 输入有效：存储到sessionStorage
            sessionStorage.setItem('username', inputValue);

            // 同一页面替换显示（如果需要的话）
            promptText.style.display = 'none';
            nameInput.style.display = 'none';
            enterBtn.style.display = 'none';
            nameDisplay.style.display = 'block';
            userNameSpan.textContent = inputValue;

            // 如果要跳转到第二个页面，就用下面这句
            // window.location.href = 'profile.html';
        });
    </script>
</body>
</html>

这里的关键点： #

• 用trim()处理输入值，避免用户只输入空格的无效情况
• 空输入时直接修改提示文本并return，阻止后续存储操作
• 有效输入时用sessionStorage.setItem('key', value)存储名称，key可以自定义，这里用username

二、第二个页面：读取Session Storage并显示（比如profile.html） #

sessionStorage是同一浏览器标签页、同源页面共享的，所以只要两个页面在同一个会话（没关闭标签）且同源，就能读取到存储的值：

<!DOCTYPE html>
<html>
<head>
    <title>显示你的名字</title>
</head>
<body>
    <h2>欢迎回来！</h2>
    <p id="displayName">你的名字：<span id="userName"></span></p>

    <script>
        window.addEventListener('load', function() {
            // 从sessionStorage读取存储的名称
            const storedName = sessionStorage.getItem('username');
            const userNameSpan = document.getElementById('userName');

            if (storedName) {
                // 有存储的值：显示出来
                userNameSpan.textContent = storedName;
            } else {
                // 没有存储的值：提示或跳回输入页面
                userNameSpan.textContent = "未找到你的名字，请先输入";
                // 也可以自动跳回输入页：
                // setTimeout(() => { window.location.href = 'index.html'; }, 2000);
            }
        });
    </script>
</body>
</html>

跨页面显示的注意事项： #

• 两个页面必须是同源：域名、协议（http/https）、端口都要一致，否则sessionStorage无法共享
• sessionStorage的生命周期是当前会话：关闭浏览器标签后，存储的值就会被清空；如果需要持久存储，可以改用localStorage（但要注意隐私问题）

三、常见问题排查 #

如果还是无法跨页面显示，你可以检查这几点：

• 是不是在不同的浏览器标签页打开的？sessionStorage不跨标签页，必须是同一个标签页跳转过去的
• 两个页面的域名/协议/端口是否一致？比如一个是http://localhost:8080，另一个是file:///xxx，这属于不同源，无法共享
• 有没有在存储后刷新了页面？sessionStorage在页面刷新后依然存在，但如果关闭标签再打开就没了

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