cookie做记住账号和密码功能,js cookie存储

在这里插入图片描述

//勾选记住密码
var onOff;
$(function() {
	GetLastUser(); //从cookie中获取用户名和密码
	$('.denglu-btn').click(function() { //点击登录按钮登录
		loginEvent()
	})
	document.onkeydown = function(event) { //俺键盘Enter键登录
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if(e && e.keyCode == 13) {
			loginEvent()
		}
	};
})

function loginEvent() {
	SetPwdAndChk();
	//这里向后台发送ajax请求,登录页面
}

function GetLastUser() {
	var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; //GUID标识符
	var usr = GetCookie(id);
	if(usr != null) {
		document.getElementById('username').value = usr;
	} else {
		document.getElementById('username').value = "";
	}
	GetPwdAndChk();
}

//点击登录时触发客户端事件
function SetPwdAndChk() {
	//取用户名
	var usr = document.getElementById('username').value;
	//将最后一个用户信息写入到Cookie
	SetLastUser(usr);
	//如果记住密码选项被选中
	if(document.getElementById('chkRememberPwd').checked == true) {
		//取密码值
		var pwd = Base64.encode(document.getElementById('password').value);
		var expdate = new Date();
		expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
		//将用户名和密码写入到Cookie
		SetCookie(usr, pwd, expdate);
	} else {
		//如果没有选中记住密码,则立即过期
		ResetCookie();
	}
}

function SetLastUser(usr) {
	var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
	var expdate = new Date();
	//当前时间加上两周的时间
	expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
	SetCookie(id, usr, expdate);
}
//用户名失去焦点时调用该方法

function GetPwdAndChk() {
	var usr = document.getElementById('username').value;
	
	if(GetCookie(usr)){
		var pwd = Base64.decode(GetCookie(usr));
	}else{
		var pwd = null;
	}
	if(pwd != null) {
		document.getElementById('chkRememberPwd').checked = true;
		document.getElementById('password').value = pwd;
	} else {
		document.getElementById('chkRememberPwd').checked = false;
		document.getElementById('password').value = "";
	}
}
//取Cookie的值

function GetCookie(name) {
	var arg = name + "=";
	var alen = arg.length;
	var clen = document.cookie.length;
	var i = 0;
	while(i < clen) {
		var j = i + alen;
		//alert(j);
		if(document.cookie.substring(i, j) == arg) return getCookieVal(j);
		i = document.cookie.indexOf(" ", i) + 1;
		if(i == 0) break;
	}
	return null;
}

function getCookieVal(offset) {
	var endstr = document.cookie.indexOf(";", offset);
	if(endstr == -1) endstr = document.cookie.length;
	return unescape(document.cookie.substring(offset, endstr));
}
//写入到Cookie

function SetCookie(name, value, expires) {
	var argv = SetCookie.arguments;
	//本例中length = 3
	var argc = SetCookie.arguments.length;
	var expires = (argc > 2) ? argv[2] : null;
	var path = (argc > 3) ? argv[3] : null;
	var domain = (argc > 4) ? argv[4] : null;
	var secure = (argc > 5) ? argv[5] : false;
	document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}

function ResetCookie() {
	var usr = document.getElementById('username').value;
	var expdate = new Date();
	SetCookie(usr, null, expdate);
}

document.cookie

1.获取所有cookie

allCookies = document.cookie;
在上面的代码中,allCookies被赋值为一个字符串,该字符串包含所有的Cookie,每条cookie以"分号和空格(; )"分隔(即, key=value 键值对)。

2.设置cookie

document.cookie = newCookie;
newCookie 是一个键值对形式的字符串。
需要注意的是,用这个方法一次只能对一个cookie进行设置或更新。

以下可选的cookie属性值可以跟在键值对后,用来具体化对cookie的设定/更新,使用分号以作分隔:

  • ;path=path (例如 ‘/’, ‘/mydir’) 如果没有定义,默认为当前文档位置的路径。
  • ;domain=domain (例如 ‘example.com’, ‘subdomain.example.com’) 如果没有定义,默认为当前文档位置的路径的域名部分。与早期规范相反的是,在域名前面加 . 符将会被忽视,因为浏览器也许会拒绝设置这样的cookie。如果指定了一个域,那么子域也包含在内。
  • ;max-age=max-age-in-seconds (例如一年为606024*365)
  • ;expires=date-in-GMTString-format 如果没有定义,cookie会在对话结束时过期
    这个值的格式参见Date.toUTCString()
  • ;secure (cookie只通过https协议传输)

cookie的值字符串可以用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).

所以,在你更新cookie或者删除cookie的时候, 要注意与添加cookie时用同样的域和路径,不同的域、不同的路径下可以存在同样名字的cookie,

封装cookie的设置及清除方法

(function($) {
    var util = {};
    $.extend(util, {
        /* 
            设置和获取cookie的方法
            option:{
                expires: 存储的有效时间--天数(-1的时候是清除cookie),此时value为null
                path: 路径
                domain: 域名
                secure: secure属性设置为true时,cookie只有在https协议下才能上传到服务器
            }
        */
        cookie: function(name, value, options) {
            if (typeof value != 'undefined') {
                options = options || {};
                if (value === null) {
                    value = '';
                    options.expires = -1;
                }
                var expires = '';
                if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
                    var date;
                    if (typeof options.expires == 'number') {
                        date = new Date();
                        date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));//多少*一天
                    } else {
                        date = options.expires;
                    }
                    expires = '; expires=' + date.toUTCString();
                }
                var path = options.path ? '; path=' + (options.path) : '';
                var domain = options.domain ? '; domain=' + (options.domain) : '';
                var secure = options.secure ? '; secure' : '';
                document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
            } else {
                var cookieValue = null;
                if (document.cookie) {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = $.trim(cookies[i]);
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
        },
        removeAllCookie: function(options) {
            var cookies = document.cookie.split(";");//将所有cookie键值对通过分号分割为数组
            for (var i = 0; i < cookies.length; i++) {///循环遍历所有cookie键值对
                if (cookies[i].indexOf(" ") == 0) {//有些cookie键值对前面会莫名其妙产生一个空格,将空格去掉
                    cookies[i] = cookies[i].substring(1);
                }
                var cookie_name = cookies[i].split("=")[0];
                util.cookie(cookie_name,null,options)
            }
        }

    });
    window.util = util;
})(jQuery);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值