Chrome控制台Uncaught报错 sessionStorage跨页取值为null问题

你的代码存在2个核心错误，直接导致控制台报错和跨页读值为null：

• sessionStorage存值语法完全写错：你写的sessionStorage("inputVal", inputVal)是把sessionStorage这个内置对象当普通函数直接调用，必然抛出Uncaught类型错误。sessionStorage的标准存值方法是setItem()，正确写法是sessionStorage.setItem("inputVal", 要存储的值)。
• 表单提交打断了存值逻辑：你绑定在提交按钮上的onclick事件还没执行完存值操作，表单就已经触发默认的同步跳转，直接卸载当前页面，存值操作根本没来得及完成；另外你的姓名输入框放在了form标签外部，本身也不符合表单关联的规范。

额外提个不规范的小问题：HTML标签的属性之间不需要加逗号分隔，你写的<input type="text", id="whatisyourname" ...>、<button ... type="submit", id="btn1" ...>里的逗号都是多余的，虽然多数浏览器会容错，但不符合语法规范，极端场景下会出现属性解析异常。

首页代码修改 #

调整结构把输入框放进form内，修正存值语法，阻止表单默认提交，等存值完成后再手动跳转页面，确保存值逻辑执行完毕：

<!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">
    <link rel="stylesheet" href="main.css">
    <title>Feel Happy</title>
</head>
<body>
    <b class="welcometofeelhappy">Welcome to FeelHappy :)</b>
    <!-- 用form包裹输入框和按钮，去掉属性之间多余的逗号 -->
    <form action="pages/landing.html" id="nameForm">
        <input type="text" id="whatisyourname" placeholder="Please enter your name!" class="whatisyournameinput" required><br>
        <button class="startBtn" type="submit" id="btn1"><h2 class="buttontext1">Let's Begin!</h2></button>
    </form>
    <script>
        // 直接监听表单提交事件，不用给按钮单独绑onclick
        document.getElementById("nameForm").addEventListener("submit", function(e){
            // 先阻止表单默认跳转行为
            e.preventDefault();
            // 取输入的姓名，去掉首尾空格
            const inputVal = document.getElementById("whatisyourname").value.trim();
            if(!inputVal) return; // 输入为空时不往下执行
            // 正确调用setItem存值
            sessionStorage.setItem("inputVal", inputVal);
            // 确认存值完成后，再手动跳转到目标页
            window.location.href = this.action;
        })
    </script> 
</body>
</html>

第二页代码（可选优化） #

你原来写的读值逻辑本身没有问题，点按钮就能正常拿到存储的姓名。如果想打开页面就直接显示欢迎语，不用手动点按钮，可以改成页面加载完成就自动读值渲染：

<!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="greetText"></h1>
    <!-- 原测试按钮可保留 -->
    <button onclick="getName()" type="button">Click Me!!</button>

    <script>
        // 页面加载完成直接读值
        const userName = sessionStorage.getItem("inputVal");
        // 渲染欢迎语，没拿到值时默认显示friend
        document.getElementById("greetText").textContent = `Hello, ${userName || 'friend'}!`;
        
        // 原测试逻辑保留
        function getName() {
            console.log(sessionStorage.getItem("inputVal"))
        }
    </script>
</body>
</html>

补充说明：sessionStorage的数据是和当前标签页绑定的，只要是同一个标签页下的同源页面，都能正常读取到存进去的值，不存在跨页权限问题，只要写对API、确保存值逻辑执行完成就不会出问题。

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