Stack Overflow en español Asked by Lleims on November 15, 2021
Buenas estoy empleando por primera vez localstorage y no consigo que funcione, ¿acaso lo he escrito mal?
for(var j=1; j<(totalInputs+1); j++){
var resultado = $('#Titulo-'+i+'-'+j).val();
localStorage.setItem('resultadoStorage', resultado);
var resultadoStorage = localStorage.getItem('resultadoStorage');
$('#Casilla-'+i+'-'+j).text(resultadoStorage);
}
A continuación dejo todo el código.
$(document).ready(function() {
$('#Anyadir-Rutina-btn').click(function() {
/********************************************************
** Hacemos aparecer el formulario del WOD
********************************************************/
$('#Modal-Formulario').css('display', 'flex');
/********************************************************
** BOTÓN "+ Ejercicio"
** Genera una nueva fila "Ejercicio" tanto en el formulario
** como en la tabla para visualizar el WOD
********************************************************/
var valorIdFila = 4; // Contador (las 3 primeras son siempre fijas).
$('#Anyadir-Ejercicio').click(function() {
// 1) Creo e inserto una nueva fila en el formulario.
var nuevaFila = '<div class="ModalFila" id="ModalFila' + valorIdFila + '"></div>';
$('#ModalFila' + (valorIdFila - 1)).after(nuevaFila);
// 2) Creo los campos de texto del formulario
var ejercicio = '<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-' + valorIdFila + '-1" placeholder="Ejercicio">';
var herramienta = '<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-' + valorIdFila + '-2" placeholder="Herramienta">';
var series = '<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-' + valorIdFila + '-3" placeholder="Nº series">';
var repeticiones = '<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-' + valorIdFila + '-4" placeholder="Nº repeticiones">';
var pesoPropuesto = '<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-' + valorIdFila + '-5" placeholder="Peso propuesto">';
var pesoFinal = '<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-' + valorIdFila + '-6" placeholder="Peso Final">';
// 3) Los inserto en la nueva fila
$('#ModalFila' + valorIdFila).append(ejercicio);
$('#ModalFila' + valorIdFila).append(herramienta);
$('#ModalFila' + valorIdFila).append(series);
$('#ModalFila' + valorIdFila).append(repeticiones);
$('#ModalFila' + valorIdFila).append(pesoPropuesto);
$('#ModalFila' + valorIdFila).append(pesoFinal);
// 4) Creo nueva fila y columnas en la tabla
var tabla = $("#Tabla-Rutinas");
var nuevaFila = $("<tr></tr>");
for (var i = 0; i < 6; i++) {
var nuevaColumna = $("<td></td>").attr({
"class": "Casilla",
"id": "Casilla-" + valorIdFila + "-" + (i + 1)
});
nuevaFila.append(nuevaColumna);
}
tabla.append(nuevaFila);
// 5) Incremento contador por si quieren añadir una nueva fila.
valorIdFila = valorIdFila + 1;
});
/********************************************************
** FUNCIÓN para eliminar los ejercicios añadidos por el
** botón "+ Ejercicio" en el formulario.
********************************************************/
function eliminarEjerciciosExtra() {
for (var b = 4; b < valorIdFila; b++) {
$('#ModalFila' + b).remove();
}
}
/********************************************************
** BOTÓN "Guardar"
** Se trata de recorrer todos los campos del formulario e
** ir escribiendo en su respectiva casilla de la tabla de
** visualización del WOD.
** Por último esconde el formulario.
********************************************************/
$('#Guardar-Formulario').click(function() {
// 1) Miro cuantas filas tiene.
var totalFilas = $('#Modal-Formulario').find('.ModalFila').length;
// 2) Miro cuantas columnas tiene cada fila.
for (var i = 1; i < totalFilas; i++) {
var totalInputs = $('#ModalFila' + i).find('.TextoFormulario').length;
// 3) Obtengo el valor de capa campo del formulario y lo escribo en su
// respectiva posición de la tabla.
for (var j = 1; j < (totalInputs + 1); j++) {
var resultado = $('#Titulo-' + i + '-' + j).val();
localStorage.setItem('resultadoStorage', resultado);
var resultadoStorage = localStorage.getItem('resultadoStorage');
$('#Casilla-' + i + '-' + j).text(resultadoStorage);
}
}
// 4) Vacío la base del formulario (FALTA HACER), elimino los añadidos y escondo el formulario
eliminarEjerciciosExtra();
$('#Modal-Formulario').css('display', 'none');
});
});
});/***** Formulario insertar nuevo WOD *****/
#Modal-Formulario {
height: auto;
width: 70%;
background-color: #354649;
margin: auto;
display: none;
flex-direction: column;
margin-top: 50px;
padding: 20px;
border-radius: 5px;
}
.ModalFila {
margin: 5px 0;
}
#ModalUltimaFila {
display: flex;
justify-content: center;
}
.Inputs-Modal {
padding: 3px;
}
.TextoFormulario {
margin-right: 5px;
}
.BtnFormulario {
background-color: #a3c6c4;
border-color: transparent;
margin: 0 5px;
padding: 3px 8px;
cursor: pointer;
}
.BtnFormulario:hover {
outline: 1px solid;
outline-color: #FFF;
}
#Titulo1 {
width: 80%;
}
#Titulo2 {
width: 80%;
}
#Titulo3 {
width: 40%;
}
#Guardar-modal-btn {
margin-right: 5px;
}
/***** Tabla donde se muestran los WODs *****/
#Tabla-Rutinas {
height: auto;
width: 70%;
border: solid 1px;
margin: auto;
}
.Casilla {
font-size: 16px;
color: darkred;
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Power-Contenedor">
<!-- Tabla donde se muestran los WODs -->
<table id="Tabla-Rutinas">
<tr>
<!-- Fila1 -->
<td colspan="6" class="Casilla" id="Casilla-1-1"></td>
</tr>
<tr>
<!-- Fila2 -->
<td>Nombre</td>
<td>Herramienta</td>
<td>Series</td>
<td>Repeticiones</td>
<td>Peso propuesto</td>
<td>Peso final</td>
</tr>
<tr>
<!-- Fila3 -->
<td colspan="6" class="Casilla" id="Casilla-2-1"></td>
</tr>
<tr class="Fila4">
<!-- Fila4 -->
<td class="Casilla" id="Casilla-3-1"></td>
<td class="Casilla" id="Casilla-3-2"></td>
<td class="Casilla" id="Casilla-3-3"></td>
<td class="Casilla" id="Casilla-3-4"></td>
<td class="Casilla" id="Casilla-3-5"></td>
<td class="Casilla" id="Casilla-3-6"></td>
</tr>
</table>
<!-- Formulario para insertar nuevo WOD -->
<div id="Modal-Formulario">
<div class="ModalFila" id="ModalFila1">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-1-1" placeholder="Título">
</div>
<div class="ModalFila" id="ModalFila2">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-2-1" placeholder="Objetivo">
</div>
<div class="ModalFila" id="ModalFila3">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-3-1" placeholder="Ejercicio">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-3-2" placeholder="Herramienta">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-3-3" placeholder="Nº Series">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-3-4" placeholder="Nº Repeticiones">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-3-5" placeholder="Peso propuesto">
<input type="text" class="Inputs-Modal TextoFormulario" id="Titulo-3-6" placeholder="Peso final">
</div>
<div class="ModalFila" id="ModalUltimaFila">
<input type="button" class="Inputs-Modal BtnFormulario" id="Guardar-Formulario" value="Guardar">
<input type="Button" class="Inputs-Modal BtnFormulario" value="Cancelar">
<input type="button" class="Inputs-Modal BtnFormulario" value="+ Objetivo">
<input type="button" class="Inputs-Modal BtnFormulario" value="- Objetivo">
<input type="button" class="Inputs-Modal BtnFormulario" id="Anyadir-Ejercicio" value="+ Ejercicio">
<input type="button" class="Inputs-Modal BtnFormulario" id="Borrar-Ejercicio" value="- Ejercicio">
</div>
</div>
<!-- Btn para hacer aparecer formulario "nuevo WOD" -->
<div id="Anyadir-Rutina-Box">
<a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>
</div>
</div>Cuando refresco la página con F5, me desaparece aquello que tenía escrito.
¿A que se puede deber?
Salud!
¡Hola! Veo que estás intentando guardar muchos inputs en un localStorage, el problema es que lo estás sobrescribiendo cada vez, lo que sucede es que localStorage.getItem('resultadoStorage'); quedará con el último valor del loop, que puede ser un valor vacío. Creo que el siguiente código puede ayudarte para lo que quieres hacer:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
var i=1;
var resultados = [];
for(var j=1; j<(10+1); j++){
var resultado = j%3;
resultados.push(resultado);
}
localStorage.setItem('resultadoStorage', JSON.stringify(resultados));
var resultadoStorage = localStorage.getItem('resultadoStorage');
console.log(resultadoStorage);
console.log(JSON.parse(resultadoStorage));
</script>
Lo hice de esa forma debido a que no tengo tus inputs para probar (tienes que cambiar el j%3 por el valor de tus inputs). Primero estoy asignando todos los valores a un arreglo, al que le aplico stringify, ya que no se pueden guardar arreglos en localStorage, luego lo muestro en consola de dos formas, como string y transformándolo en JSON.
La idea de LocalStorage es que si actualizas el sitio y llamas a localStorage.getItem('resultadoStorage'); tendrás disponibles los mismos datos que guardaste antes. Lo que se busca con localStorage es hacer que los datos no se pierdan con las actualizaciones de sitio, de esa forma puedes conservar datos de la navegación de tus usuarios.
Es importante no guardar información sensible en localStorage, es muy fácil atacar estos datos, debes tener cuidado al usarlo.
Eso ¡Mucha suerte y éxito!
Answered by Sebastian Araya on November 15, 2021
el for se ejecuta cuando carga la pagina o esta dentro de una función?
localStorage.setItem('resultadoStorage', 'test - Local Storage');.sabes como funciona el localStorage?
Answered by DoradoJ on November 15, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP