0

Hola estoy tratando de guardar unos select option en localStorage para después cuando refresque la página o vuelva a entrar en el navegador aparezcan seleccionadas mis ultimas opciones he intentado esto pero no logro hacerlo funcionar.

$(() => {
let $opciones = $("select.select");
let $nombre = $("input#nombre");
let $apellido = $("input#apellido");
let $mascota = $("input#mascota");

  
  $nombre.toggleClass("invisible");
  $apellido.toggleClass("invisible");
  $mascota.toggleClass("invisible");

let $guardar = $opciones.change(function (event) {
    event.preventDefault();
    
    var $selectedOption = $(this).children("option:selected").val();

    if ($selectedOption == 1) {
      $(".select option:first").prop("selected", "selected");
      $nombre.toggleClass("invisible");
      
         
    }

    if ($selectedOption == 2) {
      $(".select option:first").prop("selected", "selected");
      $apellido.toggleClass("invisible");
      
    }
    
    if ($selectedOption == 3) {
      $(".select option:first").prop("selected", "selected");
      $mascota.toggleClass("invisible");
    }
  });
  
  localStorage.setItem('opciones', $guardar); 
  var guardarOpcion = localStorage.getItem('opciones');
  });
.invisible {
    display:none;
}
<html>
<head>
                <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<select class="select">
                    <option value="0" selected>Opciones</option>
                    <option value="1">opcion 1</option>
                    <option value="2">opcion 2</option>
                    <option value="3">opcion 3</option>
</select>
<form>
<input type="text" id="nombre" name="nombre" value="introduce tu nombre">
<input type="text" id="apellido" name="apellido" value="introduce tu apellido">
<input type="text" id="mascota" name="mascota" value="¿tienes mascota?">
</form>
</body>
<html>

Añado que el error que aparece en el snipet no me aparece en mi código así que no se muy bien que podría ser, pero este código es un código de ejemplo muy similar a lo que yo tengo.

Alguien sabría como puedo invocar cuando se recargue la página? no se muy bien donde colocar la variable guardarOpcion para que funcione. muchas gracias!!

5
  • 1
    Estás invocando correctamente a localStorage.getItem() pero no estás haciendo nada con el valor que obtienes... Deberías de guardarlo en una variable. Ej.: guardar = localStorage.getItem('opciones');
    – FranAcuna
    el 16 feb. 2021 a las 19:46
  • Cuando la página cargue llamas a localStorage.getItem() y guardas lo que obtiene la funci[on en una variable.
    – FranAcuna
    el 16 feb. 2021 a las 19:48
  • Estoy en blanco ahora mismo me puedes poner un ejemplo ?? el 16 feb. 2021 a las 19:50
  • Creo que lo mejor es que leas la documentación, ahi vienen todos los ejemplos que necesitas.
    – FranAcuna
    el 16 feb. 2021 a las 19:55
  • mm si entiendo lo que hace acabo de ver la documentación pero me quedo un poco igual, el problema es que si le pongo por ejemplo, guardar = localStorage.getItem('opciones'); donde debería llamar a guardar?? o que hago con guardar exactamente para que funcione? es que yo siempre lo he usado para llamarlo en otro sitio y ahora mismo ni idea. el 16 feb. 2021 a las 19:57

1 respuesta 1

3

No estás haciendo nada con el objeto que guardas en localStorage. De hecho, lo estás sobreescribiendo cada vez que inicias la página, sin comprobar si ya existe o tienes algo allí, por lo que no podrás cargar nada que ya hubiera anteriormente.

Mira este ejemplo en JSFiddle: https://jsfiddle.net/ftxz5cjq/4/

No lo pongo como fragmento ejecutable porque StackOverflow no soporta que usemos localStorage y el ejemplo no funcionaría, pero voy a poner el código para que esté todo dentro de la página:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </head>
  <body>
    <label>
      <input id="checkbox" type="checkbox">
      Checkbox
    </label>
  </body>
</html>
$(() => {
  const guardado = localStorage.getItem('checkbox');
  const $checkbox = $('#checkbox');
  if (guardado !== null) {
    console.log(`Estado cargado: ${guardado}`);
    $checkbox.prop('checked', guardado === 'true');
  }

  $checkbox.change(() => {
    const estado = $checkbox.prop('checked');

    localStorage.setItem('checkbox', estado);
    console.log(`Nuevo estado guardado: ${estado}`);
  });
});

Este JSFiddle creo que hace lo que deseas: https://jsfiddle.net/nu1tmL4z/1/ échale un ojo y mira a ver cómo funciona, y lo puedes adaptar a tus necesidades finales.

6
  • como podría guardar correctamente cada una de mis opciones selecionadas?¿ he tratado de hacer lo que me dices pero no termino de aclararme el 17 feb. 2021 a las 1:58
  • Lo cierto es que no tengo claro qué es lo que quieres guardar. ¿Los valores de nombre, apellido y mascota? ¿El valor del selector? ¿O el estado de mostrado/oculto de los campos de texto? ¿Otra cosa?
    – ArianJM
    el 17 feb. 2021 a las 7:09
  • Quiero guardar el estado en el que aparecen y su contenido, es decir si no esta afectado por el estilo invisible y si hay slgo escrito en ellos el 17 feb. 2021 a las 9:53
  • Es decir quiero guardar como se queda exactamente al momento de cerrar o refrescar el navegador, si se ve nombre y mascota como opciones y pone en nombre "pepe" y en mascota "si tengo" o lo que sea que este escrito el 17 feb. 2021 a las 9:57
  • 1
    @WinterIsBack he actualizado mi respuesta, mira este JSFiddle: jsfiddle.net/nu1tmL4z/1
    – ArianJM
    el 17 feb. 2021 a las 10:33

Tu Respuesta

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

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