0

Tengo este formulario en el que la key de almacenamiento es el campo DNI, pero a la hora de guardar la key no se queda guardada; directamente aparece en blanco, solo se queda guardado cuando la escribo también en el campo recuperar y después le doy al botón guardar, evidentemente así no es como debe funcionar el formulario.

Pasaré el código que creo que esta dando problemas, el resto del código por lo menos de donde tiene que realizar las funciones de guardar, recuperar y mostrar lo pondré en un ide online ya que no creo que me deje pasarlo por aquí--> https://jsfiddle.net/vxs50azb/1/

Ahora si las partes donde creo que le código podría fallarme creo que están en la función recuperar y en como esta debe mostrarse aun así pasare la función guardar por si esta no funcionase de acuerdo a lo que quiero

    function guardar() {
    
        console.log("entra");
    
        
        var datos = {}
        
        
        datos.nombre = document.getElementById('nombre').value;
        datos.email = document.getElementById('email').value;
        datos.edad = document.getElementById('edad').value;
        datos.etsex = document.getElementById('etsex').value;
        datos.tlf = document.getElementById('tlf').value ;
        datos.estado_civil = document.getElementById('estado_civil').value;
        datos.seleccion= document.getElementById('seleccion').value;
        datos.txtdesc = document.getElementById('txtdesc').value;
    
    
    
        /*datos = JSON.parse(sessionStorage.setItem(guardaDNI));*/
        localStorage.setItem(guardaDNI.value, JSON.stringify(datos));
    
    }
    
    function recuperar(){
        console.log("entra");
        var guardaDNI = document.getElementById('guardaDNI').value;
    
        if(localStorage.getItem(guardaDNI)){
            console.log("Pilla el item")
            var datos = localStorage.getItem(guardaDNI);
            console.log(datos.modalidad);
        }else{
            window.alert("No hay datos del DNI : "+guardaDNI);
            document.getElementById('guardaDNI').value = "";
        }
    
    }

function mostrar2(){
    var options = "top = 100, left = 100, width = 800px , height= 900px";
    var new_wind;
    new_wind = window.open("","info", options);
    var nombre = document.getElementById("nombre").value;

    var id = document.getElementById("dni");
    id.value
    var idmsg = "Tu DNI es: "+ document.getElementById("dni").value;

    var email = document.getElementById("email").value;
    var edad = document.getElementById("edad").value;

    var asx = document.getElementsByName("sexual");
    var sx;
    for(var i=0;i<asx.length;i++){
        if(asx[i].checked ){
            sx = asx[i].value;
        }
    }

    var tlf = document.getElementById("tlf").value;


    var reg = document.getElementById("estado_civil");
    var estado_civil = reg.options[reg.selectedIndex].value;

    var select = document.getElementsByName("seleccion");
    var sel = [];
    var seleccion = "";
    for(var i=0;i<select.length-1;i++){
        if(select[i].checked){
            sel.push(select[i].value);
            
        }
    }

    for(var i=0;i<sel.length;i++){
        if(select[5].checked){
            if(i<sel.length){
                seleccion += sel[i]+", ";
            }else if(i==sel.length){
                seleccion +=sel[i];
            }
        }else{
            if(i<sel.length){
                seleccion += sel[i]+", ";
            }else if(i==sel.length-1){
                seleccion +=" y "+ sel[i]+".";
            }
        }
            
    }

    if(select.checked){
        seleccion +=" y "+ document.getElementById("extra").value+".";
    }

    var descripcion = document.getElementById("txtdesc").value;
    
    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: "+nombre+"<br>"+idmsg+
        "<br>Tu email es: "+email+"<br>Tu sexo es: "+sx +"<br>Tu edad: "+edad+
        "<br>Tu teléfono de contacto: "+tlf+
        "<br>Su estado civil es: "+estado_civil+"<br>Acepto las cookies: "+seleccion+
        "<br>Por último lo que escribio es lo siguiente: "+descripcion+"</div></div></body></html>"
    );
}
4
  • Tienes dos funciones con el mismo nombre, con lo que la segunda borrará la primera. Además tienes una variable que defines en una función pero usas en otra. Deberías primero intentar "limpiar" y ordenar el código el 1 jun. 2021 a las 11:04
  • Si modifque ese error @PabloLozano pero aun con esas sigue sin funcionar como me gustaria
    – Domm
    el 1 jun. 2021 a las 12:13
  • sigues declarando guardaDNI en recuperar pero lo usas en guardar el 1 jun. 2021 a las 12:16
  • Hola, Domm. Antes de guardar en localStorage cualquier dato debes recuperarlo primero (si es que existe previamente) y luego guardarlo, de lo contrario, lo borrarás cada vez que le des guardar. el 1 jun. 2021 a las 13:11

1 respuesta 1

1

voy a intentar arrojar algo de luz.

para trabajar con localStorage hay que tener muy en cuenta que solo se pueden almacenar objetos clave | valor : string, es decir solo puedes guardar cadenas de texto.

cuando guardas un objeto, primero debes convertirlo a string para poder almacenarlo

JSON.stringify(datos)

para guardar un item:

localStorage.setItem( nombre de la clave, clave);

en tu caso:

localStorage.setItem(guardaDNI.value, JSON.stringify(datos));

estas guardando como nombre de clave "guardaDNI.value", es decir, el valor que contiene una variable, que por cierto, no existe, asi que no estas guardando nada en localstorage.

la forma que necesitas, aplicando lo que he expuesto mas arriba es:

localStorage.setItem('guardaDNI', JSON.stringify(datos));

de esta forma ya tendras almacenado el valor en el localStorage con nombre 'guardaDNI', asi que para recuperarlo, ya que has guardado un objeto en forma de string, necesitas volver a convertirlo en JSON para volver a utilizarlo, de esta manera:

var datos = JSON.parse(localStorage.getItem('guardaDNI'));

en tu codigo, quedaria mas o menos asi:

function guardar() {

    console.log("entra");

    
    var datos = {}
    
    var dni = document.getElementById('dni').value; //te faltaria añadir el dni

    datos.nombre = document.getElementById('nombre').value;
    datos.email = document.getElementById('email').value;
    datos.edad = document.getElementById('edad').value;
    datos.etsex = document.getElementById('etsex').value;
    datos.tlf = document.getElementById('tlf').value ;
    datos.estado_civil = document.getElementById('estado_civil').value;
    datos.seleccion= document.getElementById('seleccion').value;
    datos.txtdesc = document.getElementById('txtdesc').value;

localStorage.setItem(dni, JSON.stringify(datos));
}

function recuperar(){
    console.log("entra");
    var guardaDNI = document.getElementById('guardaDNI').value;

    console.log("Pilla el item")
    var datosDNI = JSON.parse(localStorage.getItem(guardaDNI));

    if(datosDNI){ //comprueba si se recupero algo del localStorage
        console.log(datos.modalidad); //no veo que exista modalidad, pero seria cambiar por una que exista o añadirla
      //trabajar con los datos recuperados....
    }else{
        window.alert("No hay datos del DNI : "+guardaDNI);
        document.getElementById('guardaDNI').value = "";
    }

}

de esta forma tienes un objeto "numeroDNI | datosDNI" en localstorage por cada dni que guardes

espero haberte ayudado con esta explicacion.

saludos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.