cookie實現記得狀態免登陸
阿新 • • 發佈:2018-11-08
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。