1

Ahora mismo tengo dos documentos, uno en el que obtengo datos de un formulario y otro donde los imprimo. Los paso de uno a otro con localStorage:

Este es el HTML del formulario

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>023 : form DataTable</title>
    <script src="js/023.js"></script>
</head>
<body>
    <form name="formBuscar" method="POST">
    <input type="text" class="txt">
    <input type="date" class="din">
    <input type="date" class="dfn">
</form>
<button type="button">Busca ya</button>
</body>
</html>
window.addEventListener('load', ()=>{
    let frm = document.querySelector('form');
    document.querySelector('button').addEventListener('click', ()=>{
        getInpts(frm);
    });
});

function getInpts(frm){
    frm.querySelectorAll('input').forEach(item=>{
        localStorage.setItem('length', frm.length);
        if(item.value){
            for(i=0;i<frm.length;i++){
                localStorage.setItem('value'+i, item.value);
            }
            window.location.assign('http://localhost/pruebas/021.html');
        }
    });
}

Como se puede ver, guardo 4 valores distintos en localStorage, los 3 input y el length del formulario, es decir, cuantos input haya.

En dicho punto, si sustituyo el window.location.assign por un console.log del localStorage, obtengo los 3 resultados que quiero (dentro del bucle for, claro).

Aquí muestro cómo recojo los datos:

window.addEventListener('load', ()=>{
    let lng = localStorage.getItem('length');
    for(i=0;i<lng;i++){
        console.log(localStorage.getItem('value'+i));
    }
})

Pero sólo me muestra el último dato, y juraría que lo estoy guardando en objetos distintos.

¿Qué estoy haciendo mal?

1
  • 1
    Sería más fácil crear un arreglo (u objeto) con pares campo: valor, guardar con JSON.stringify() y leerlo con JSON.parse(), con eso evitas tener una variable por cada campo y el mantenimiento es mucho más sencillo.
    – Triby
    Commented el 30 mar. 2021 a las 16:53

2 respuestas 2

1

La función getinpts tiene un doble bucle innecesario que machaca los datos guardados. Debería ser algo como:

function saveInputs(form){
  const inputs = form.querySelectorAll('input');
  inputs.forEach((input, index) => {
    if(input.value){
      localStorage.setItem('value' + index, input.value);
    }
  });
  localStorage.setItem('length', inputs.length);
}
0

Ya tengo la solución, al menos, algo que me ha servido. Si hay algo mejor que mi solución por favor, decídmelo:

Tuve que cambiar el bucle for donde meto los valores del formulario en localStorage, ya que lo que estaba haciendo es meter 3 veces el primer valor, por la iteración del forEach y después del for, 3 veces el segundo y 3 veces el tercero.

Con haberle agregado desde un principio un index al forEach, hubiera bastado:

window.addEventListener('load', ()=>{
    let frm = document.querySelector('form');
    document.querySelector('button').addEventListener('click', ()=>{
        getInpts(frm);
    });
});

function getInpts(frm){
    frm.querySelectorAll('input').forEach((item,index)=>{
        localStorage.setItem('length', frm.length);
        if(item.value){
            localStorage.setItem('value'+index, item.value);
            window.location.assign('http://localhost/pruebas/021.html');
        }
    });
}

y recoger los datos tal y como lo tenía:

window.addEventListener('load', ()=>{
    let lng = localStorage.getItem('length');
    for(i=0;i<lng;i++){
        console.log(localStorage.getItem('value'+i));
    }
})
1
  • Sigues guardado N veces el número de inputs Commented el 30 mar. 2021 a las 8:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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