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!!
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');
localStorage.getItem()
y guardas lo que obtiene la funci[on en una variable.