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?
campo: valor
, guardar conJSON.stringify()
y leerlo conJSON.parse()
, con eso evitas tener una variable por cada campo y el mantenimiento es mucho más sencillo.