0

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.

4
  • Ya trataste de ver si el navegador que usas permite guardar y/o en su defecto usar javascript junto con localStorage? Acuérdate que tiene cierta compatibilidad con navegadores. Commented el 30 dic. 2019 a las 19:09
  • Sisi, el localStorage funciona en mi navegador (es Chrome). Pero nose si es eso el factor del problema
    – Sebaavt95
    Commented el 30 dic. 2019 a las 19:14
  • Cada vez que cierres la ventana puedes guardar cual es la url antes de cerrar asi al iniciar puedes revisar si existe un valor en localstorage recargas la pagina y lo borras de localstorage, lo guardaras nuevamente cuando se cierre la ventana Commented el 30 dic. 2019 a las 20:58
  • necesitas que te ayuden las cookies Commented el 3 ene. 2020 a las 5:24

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.