html如何实现自动登录,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();