Home / Questions / 468617
Accepted
John Doe
Asked: 2022-07-14 07:09:38 +0800 CST 2022-07-14 07:09:38 +0800 CST

How can I maintain a login session when moving from one tab to another on my website using cookies?

  • 772

The operation would be that when a user logs in through a login, some navbar buttons are enabled. So far so good, but when I enter one of those buttons, the other buttons are disabled and I don't know how to make it read my cookies and keep me logged in. If I hit home, it doesn't keep me in session either and all the buttons are disabled.

This is the function for the login:

     function Comprueba()
{
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data)
  {
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>");     
        
        $("#Noticias").removeClass( "disabled");
        $("#Noticias").addClass( "active");
        
        $("#Rutas").removeClass( "disabled");
        $("#Rutas").addClass( "active");
        
        $("#Inscribirse").removeClass( "disabled");
        $("#Inscribirse").addClass( "active");
        
        $("#Listados").removeClass( "disabled");
        $("#Listados").addClass( "active");

        document.cookie = user=pass;
        var x = document.cookie;
        window.alert(x);

        limpiarFormulario();        
      }
     else
     {  
        $("#mensaje").html("<span class='roja'>Usuario no válido</span>");
     }
  });   
}

With php I would know how to do it because through the post method you receive the two parameters user and pass and save it in the session, you do a check when entering each tab and that's it, but with cookies I have no idea and I don't know if it would be a better option to use localStorage or sessionStorage. I hope you can help me thanks.

javascript

1 Answers

  1. Best Answer

    I have created a function to verify that if there is data in sessionStorage, that eliminates the disable of the buttons, likewise it is also necessary to make sure that the call to the function occurs once the elements have been loaded (in my case the navbar) since if not, it does not produce the desired effects (remove the disable with removeClass). And make sure the js files are loaded at the top of the page.

         function Comprueba()
{
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data)
  {
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>"); 
        sessionStorage.setItem('usuario', user); //aqui guardo en 'usuario' el nick del usuario que se va a logear.    
        
        $("#Noticias").removeClass( "disabled");
        $("#Noticias").addClass( "active");
        
        $("#Rutas").removeClass( "disabled");
        $("#Rutas").addClass( "active");
        
        $("#Inscribirse").removeClass( "disabled");
        $("#Inscribirse").addClass( "active");
        
        $("#Listados").removeClass( "disabled");
        $("#Listados").addClass( "active");
         
        limpiarFormulario();        
      }
     else
     {  
        $("#mensaje").html("<span class='roja'>Usuario no válido</span>");
     }
  });   
}

    With this function I check when changing tabs if there is something saved in localStorage to keep the buttons active.

     function comprobarCookies()
{ 

   var x = sessionStorage.getItem('usuario');
  if(x != null)

  {
        $("#Noticias").removeClass( "disabled");
        $("#Noticias").addClass( "active");
        
        $("#Rutas").removeClass( "disabled");
        $("#Rutas").addClass( "active");
        
        $("#Inscribirse").removeClass( "disabled");
        $("#Inscribirse").addClass( "active");
        
        $("#Listados").removeClass( "disabled");
        $("#Listados").addClass( "active");

        window.alert("funciona");
  }
}

    In the case of wanting to close the session, you would only have to add a function like this:

        function cerrarSesion()
{
    sessionStorage.clear(); //esto borra todo del storage pero se puede elegir que borrar y que no.
}

    Edit: I've been testing and it doesn't work well to use cookies for a login, it clearly works better using localStorage or sessionStorage so I'm editing the answer.

    • 0