1. 程式人生 > >cookie實現記得狀態免登陸

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。