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。