Js实现下次自动登录功能

场景：

1、登录完成关闭标签页，打开新的标签页，免登录；

2、登录完成，关闭浏览器，再打开浏览器，免登录（下次自动登录）；

一般使用浏览器cookie作为保存数据的载体。

在登录成功时，保存相关数据：

1、页面登录HTML

 

        

            UserName:
            
        
        

            Password
            
        
        Login
 

2、Login登录按钮及注销相关JS处理

    $("#login").on('click', login);
    const LOGIN_TIME = 7*24*60*60*1000; // 1个星期
    
    function login(){
        var name = $("#userName").val();
        var password = $("#password").val();
        // 此处应校验
        // 此处是下次自动登录的关键(增加expires)
        var date = new Date();
        // 可下次登录时间长度，单位毫米，此处为1个星期
        date.setTime(date.getTime() + LOGIN_TIME); 
        // ajax请求成功，需要cookie存储,数据应加密
        var sid = data.sessionId; // 这是登录成功返回的认证标志
        document.cookie = "USERNAME=" + Base64.encode(name) + ";path=/;expires="+date.toGMTString();
        document.cookie = "SID=" + Base64.encode(sid) + ";path=/;expires="+date.toGMTString();
        // 跳到主页面
    }


    // 注销/退出登录状态，需要清除cookie
    function logout(){
        var date = new Date();
        date.setTime(date.getTime() - 60*60*1000); 
        document.cookie = "USERNAME;path=/;expires="+date.toGMTString();
        document.cookie = "SID=;path=/;expires="+date.toGMTString();
        // 跳到登录页
    }

3、校验是否是自动登录

 function initData(){
     if(!getCookie("USERNAME") || !getCookie("SID")){
         // 跳到登录页
     }else{
         // 跳到主页面
     }
 }

 function getCookie(cookieName){
     cookieName += "=";
     var cookieList = document.cookie.split(";");
     for(var i= 0; i< cookieList.length; i++){
         var cookieItem = cookieList[i].trim();
         if(cookieItem.indexOf(cookieName) != -1){
             return cookieItem.substring(cookieName.length, cookieItem.length);
         }
     }
     return '';
 }

 initData();