Estoy intentando hacer un login en el frontend y tengo un problema que no logro solucionar:
En una misma página tengo un formulario de login y un panel de usuario. Cuando pulso Entrar el formulario se oculta y se muestra el panel y cuando pulso en Cerrar sesión ocurre lo inverso.
Además tengo un localStorage donde almaceno el nombre que se escribe en el formulario.
El problema es que cuando cierro la página con la sesión abierta y la vuelvo a abrir me envía otra vez al formulario, manteniendo el valor pasado por el localStorage, yo quiero que al recargar la página o cerrarla y volverla a abrir (con la sesión abierta) me aparezca el panel de usuario y no el formulario, así una vez que pulse en "Cerrar sesión" se elimine el valor del localStorage.
Les dejo el código:
let containerFrm = $('#container-form')
containerPanel = $('#container-panel'),
formulario = $('#frm');
containerPanel.hide();
formulario.submit(function(e) {
let nombre = $('#nombre').val();
containerFrm.hide();
containerPanel.show();
localStorage.setItem('nombre', nombre);
let nombreGuardado = localStorage.getItem('nombre');
if (nombreGuardado != null && nombreGuardado != 'undefined' && nombreGuardado != '') {
containerPanel.html('<h1>Bienvenido, ' + nombre + '</h1>').append('<a href="" id="logout">Cerrar sesión</a>');
$('#logout').click(function() {
containerPanel.hide();
containerFrm.show();
localStorage.clear();
});
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container-form">
<form id="frm">
<input type="text" id="nombre" placeholder="Nombre" required>
<input type="submit" value="Entrar">
</form>
</div>
<div id="container-panel">
<div id="sesion"></div>
</div>
Yo supongo que me falta aplicar alguna función o método. Ya busqué por todos lados. ¡Si alguien me tira una ayuda agradezco!
Nota: al ejecutar el código acá me da un error del localStorage.