Correct use of localstorage

Question

Correct use of localstorage

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good I am using for the first time localstorage and I do not get it to work, have I written it wrong?

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);
}

Next I leave all the code.

$(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>

When I refresh the page with F5, what I had written disappears.

What can you owe?

Health!

javascript jquery local-storage

asked by NEA 04.01.2018 в 23:59

source

2 answers

Error in json ajax and codeigniter using join Problems of formatting dates when uploading the Yii2 application to the server

score 0 · Answer 1

does the for run when it loads the page or is it inside a function?

What may happen is that your variable result is empty, you can set a value localStorage.setItem('resultadoStorage', 'test - Local Storage'); .
I do not understand the reason why you invoke localStorage.setItem () and to the next line you invoke the get localStorage. getItem ().

Do you know how localStorage works?

score 0 · Answer 2

Hello! I see that you are trying to save many inputs in a localStorage, the problem is that you are overwriting it every time, what happens is that localStorage.getItem ('resultStorage'); will keep the last value of the loop, which can be an empty value. I think the following code can help you for what you want to do:

<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>

I did it that way because I do not have your inputs to prove (you have to change j% 3 for the value of your inputs). First I am assigning all the values to an array, to which I apply stringify, since you can not save arrays in localStorage, then I show it in console in two ways, as a string and transforming it into JSON.

The idea of LocalStorage is that if you update the site and you call localStorage.getItem ('resultStorage'); you will have the same data that you saved before. What you are looking for with localStorage is to make sure that the data is not lost with the site updates, that way you can keep browsing data of your users.

It is important not to save sensitive information in localStorage, it is very easy to attack this data, you must be careful when using it.

That Good luck and success!