cookie实现记得状态免登陆

cookie是保存在浏览器的一段小信息，基本对象是url
可以仅仅在前端js处实现保留登录状态

核心代码

/** 
 * cookie操作基本函数
 * cookie的key-value使用"cphone"="xxxx"
 * 
 * @author chgl16
 * @date 2018.10.18
 */

// 如果有登录框存在，默认把它隐藏掉
$("#dialog-login").hide();

var cookie_key = "cphone";

/**
 * 设置cookie
 * 
 * @param ckey
 * @param cvalue  
 * @param exdays 过期天数
 * @returns
 */
function setCookie(ckey, cvalue, exdays){
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = ckey + "=" + cvalue + "; " + expires;
}

/**
 * 通过key获取cookie的value
 * 
 * @param ckey
 * @returns
 */
function getCookie(ckey){
    var key = ckey + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(key) == 0) { 
        	return c.substring(key.length, c.length); 
        }
    }
    return "";
}

/**
 * 检测cookie是否存在
 * 
 * @param ckey
 * @returns
 */
function checkCookie(ckey){
	var cvalue = getCookie(ckey);
	// 有数值才叫存在
    if (cvalue != ""){
        return true;
    }
    else {
        return false;
    }
}

/**
 * 删除cookie
 * 就是设置cookie值为"" (cookie还存在)
 */
function deleteCookie() {
	// 设置cookie值位""
	setCookie(cookie_key, "", 100); 
}

/**
 * 如果cookie存在，供onload函数调用。
 * 
 * @param cookie中的cphone值
 * 
 */
function onloadInteract(cvalue) {
	$.ajax({
		url: "onload",
		type: "post",
		contentType: "application/x-www-form-urlencoded;charset=utf-8",
		data:{
			"phone": cvalue
		},
		dataType: "json",
		success: function (data) {		
			console.log("哦耶登录成功！");
			
		},
		error:function(data){
		}
	});
}

/**
 * 登录函数
 */
function login() {
	....
	// 登录成功，设置cookie
	var cvalue = xxx;
	// 有效期365天，默认不设置天数的话，关闭浏览器就过期
	setCookie(cookie_key, cvalue, 365);
	console.info("成功设置了cookie");	
}
/**
 * 网页加载调用函数
 * 检查是否存在cookie，存在就不用登录了，登录框都不显示
 */
window.onload = function() {
	// 默认隐藏登陆框
	$("#dialog-login").hide();
	console.info("进入onload函数");
	/* @chl16
	 * 检测cookie 
	 */
	if (checkCookie(cookie_key)) {
		// cookie存在
		console.info("cookie存在:");
		
		// 直接通过phone交互
		onloadInteract(getCookie(cookie_key));
		
	} else {
		console.log("cookie不存在");
		$("#dialog-login").show();
		// 显示函数
		showMask(); 
	}
}

/**
 * 退出登录函数
 */
function exit(){
	/*
	 * @chgl16 
	 * 退出登陆，删除cookie
	 */
	deleteCookie();

	....
}

以上即为cookie在前端完全实现的代码，这样写，后台可以无需对cookie操作。
当然，onloadInteract函数ajax请求可以不传数据，只发http请求，因为cookie会默认嵌在http请求里面，后台可以通过cookie获取其value。

基本逻辑思路（全在js）：
1.每次打开网页，自动进入onload函数，onload函数检测是否有该网站的cookie。
2.如果不存在，跳到登录，登录成功后，设置cookie（务必设置逾期时间），cookie就会保存在浏览器中。
3.刷新或者下次打开网站，调用onload函数，检测到cookie存在，直接进入首页交互获取数据填充。
4.只有在点击网站内部提供设置的退出登录/切换账号按钮才清除cookie。

cookie实现记得状态免登陆

猜你喜欢