Uncaught ReferenceError: datos未定义问题的排查与解决

我来帮你一步步拆解问题并解决这个报错：

核心错误原因分析 #

1. datos变量未定义：在guardar函数里，你直接尝试访问datos.nombre、datos.email等属性，但datos这个变量既没声明也没赋值，浏览器自然会抛出ReferenceError。
2. SessionStorage API 使用错误：
   • guardaDNI变量在guardar函数里也未定义，你需要先获取用户输入的DNI作为存储的键名。
   • datos = JSON.parse(sessionStorage.setItem(guardaDNI))这行完全错误：setItem是用来存储数据的，它没有返回值（实际返回undefined），读取数据应该用getItem方法。
3. 重复定义recuperar函数：你写了两个同名的recuperar函数，JS中后面的函数会覆盖前面的，导致第一个恢复数据的逻辑完全失效。

修复后的完整代码 #

// 修正后的保存函数：先收集表单数据，再存入sessionStorage
function guardar() {
    // 1. 先从表单收集所有数据到datos对象
    const datos = {
        nombre: document.getElementById('nombre').value,
        email: document.getElementById('email').value,
        edad: document.getElementById('edad').value,
        etsex: document.getElementById('etsex').value,
        tlf: document.getElementById('tlf').value,
        estado_civil: document.getElementById('estado_civil').value,
        seleccion: document.getElementById('seleccion').value,
        txtdesc: document.getElementById('txtdesc').value
    };
    
    // 2. 获取用户输入的DNI作为存储键名（需确保表单中有id为dni的输入框）
    const guardaDNI = document.getElementById('dni').value;
    
    // 3. 正确存储数据到sessionStorage（对象需转为字符串）
    sessionStorage.setItem(guardaDNI, JSON.stringify(datos));
    
    // 可选：添加保存成功提示
    alert('数据已保存，对应DNI：' + guardaDNI);
}

// 合并并修正的恢复函数：先读取数据，再打开新窗口展示
function recuperar() {
    const guardaDNI = document.getElementById('guardaDNI').value;
    
    // 检查sessionStorage中是否存在对应DNI的数据
    if (sessionStorage.getItem(guardaDNI)) {
        // 读取并解析存储的字符串为对象
        const datos = JSON.parse(sessionStorage.getItem(guardaDNI));
        
        // 打开新窗口
        const options = "top=100, left=100, width=800, height=900";
        const new_wind = window.open("", "info", options);
        
        // 从解析后的datos中提取数据，构建展示内容
        new_wind.document.write(`
            <html>
                <head><link rel='stylesheet' href='style/style.css'></head>
                <body>
                    <div id='result'>
                        <div id='flote'>
                            <h1>info:</h1><br>
                            <hr>
                            Tu nombre es: ${datos.nombre}<br>
                            Tu DNI es: ${guardaDNI}<br>
                            Tu email es: ${datos.email}<br>
                            Tu sexo es: ${datos.etsex}<br>
                            Tu edad: ${datos.edad}<br>
                            Tu teléfono de contacto: ${datos.tlf}<br>
                            Su estado civil es: ${datos.estado_civil}<br>
                            Acepto las cookies: ${datos.seleccion}<br>
                            Por último lo que escribio es lo siguiente: ${datos.txtdesc}
                        </div>
                    </div>
                </body>
            </html>
        `);
    } else {
        window.alert("No hay datos del DNI : " + guardaDNI);
        document.getElementById('guardaDNI').value = "";
    }
}

关键修复点说明 #

• guardar函数：
  • 先创建datos对象，从表单中收集所有需要存储的值，彻底解决变量未定义的问题。
  • 正确获取DNI作为存储键名，确保数据能通过DNI精准定位。
  • 使用JSON.stringify将对象转为字符串存储（sessionStorage仅支持字符串类型）。
• recuperar函数：
  • 合并了原有的两个同名函数逻辑，避免代码覆盖导致的功能丢失。
  • 用JSON.parse将存储的字符串转回对象，确保能正常访问数据属性。
  • 使用模板字符串（`）构建HTML内容，比传统字符串拼接更清晰易维护。

额外注意事项 #

• 确保表单中所有用到的输入框id与代码中的getElementById参数完全匹配，否则会出现无法获取值的问题。
• SessionStorage是会话级存储，关闭浏览器标签页后数据会丢失，如果需要持久化存储，可以改用localStorage。

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