个人对页面记住账户密码的cookie方法的一些尝试

最新推荐文章于 2025-08-07 21:05:33 发布

原创最新推荐文章于 2025-08-07 21:05:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#在js中用cookie实现记住账号密码

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现页面记住账户密码的功能。通过设置、获取和删除Cookie，当用户勾选“记住我”选项时，可以在下次访问时自动填充账号和密码。同时强调了页面加载完成后需要调用initUsername方法来初始化已保存的账户信息。

引言

最近因为项目需求，所以对页面的cookie做了一些尝试，当勾选了记住账户密码的时候就可以在下次登录的时候不必再重新输入账号密码，下面我就其具体实现说明一下。

function addCookie(name,value,days,path){   /**添加设置cookie**/  
    var name = escape(name);  
    var value = escape(value);  
    var expires = new Date();  
    expires.setTime(expires.getTime() + days * 3600000 * 24);  
    path = path == "" ? "" : ";path=" + path;  
    var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString();  
    document.cookie = name + "=" + value + _expires + path;  
}

上面的是先添加设置cookie，

//获取cookie值
function initUsername(){
	var userNameValue = getCookieValue("userName");  
    document.getElementById("userName").value = userNameValue;  
    var userPassValue = getCookieValue("password");  
    document.getElementById("password").value = userPassValue;
	
}

function getCookieValue(name){  /**获取cookie的值，根据cookie的键获取值**/  
    //用处理字符串的方式查找到key对应value  
    var name = escape(name);  
    //读cookie属性，这将返回文档的所有cookie  
    var allcookies = document.cookie;         
    //查找名为name的cookie的开始位置  
    name += "=";  
    var pos = allcookies.indexOf(name);      
    //如果找到了具有该名字的cookie，那么提取并使用它的值  
    if (pos != -1){                                             //如果pos值为-1则说明搜索"version="失败  
        var start = pos + name.length;                  //cookie值开始的位置  
        var end = allcookies.indexOf(";",start);        //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置  
        if (end == -1) end = allcookies.length;        //如果end值为-1说明cookie列表里只有一个cookie  
        var value = allcookies.substring(start,end); //提取cookie的值  
        return (value);                           //对它解码        
    }else{  //搜索失败，返回空字符串  
        return "";  
    }  
}

上面的是获取在输入账号密码的cookie

function deleteCookie(name,path){   /**根据cookie的键，删除cookie，其实就是设置其失效**/  
    var name = escape(name);  
    var expires = new Date(0);  
    path = path == "" ? "" : ";path=" + path;  
    document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;  
}

上面的代码是删除cookie

function doLogin() {

	var uName = $('#userName').val();
	var psw = $('#password').val();
	if (commonJS.validateTagsNull("userName,password"))
		return;
	

	var rememberMe = 0;
	if ($("input[type='checkbox']").is(":checked")) {
		rememberMe = 1;
		if(rememberMe){
			addCookie("userName", uName, 7, "/");
			addCookie("password",psw,7,"/");
		}else{
			deleteCookie(uName, "/");
			deleteCookie(psw,"/");
		}
		
	}

上面的代码就是判断是否有勾选记住账户密码，如果勾选了，则调用addCookie方法。

还有一点就是在js中页面加载完成就该调用initUsername方法。