登录 记住 (保存)用户名密码(设置:cookie)

（如果有不懂的，请看javascript cookie详解）

 

登录欢迎页面的例子:

login.html

    
    
    
    



    

        UserName:
        
    

        Password:
        
    

        记住密码
        
    

        
    



 

welcome.html

    
    





    
    


Welcome!
点击返回登陆框

cookie.js

/**
 * Created by ZhangML on 2019/5/28.
 */
//    /新建cookie。
// hours为空字符串时,cookie的生存期至浏览器会话结束。
// hours为数字0时,建立的是一个失效的cookie,这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。
function setCookie(name,value,hours,path){
    var name = escape(name);//escape可以加密数据
    var value = escape(value);//escape可以加密数据
    var expires = new Date();//过期时间
    expires.setTime(expires.getTime() + hours*3600000);//设置过期时间
    path = path == "" ? "" : ";path=" + path;//path不为空则设path=path
    _expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();//hours参数类型字符串则为空,否则转为UTCString
    document.cookie = name + "=" + value + _expires + path;//cookie:name=value;expires=time;path=path,过期时间,路径
}
//获取cookie值
function getCookieValue(name){
    var name = escape(name);//escape可以加密数据
//读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);              //对它解码
        return unescape(value);//对它解码
    }
    else return "";                //搜索失败，返回空字符串
}

//删除cookie
function deleteCookie(name,path){
    var name = escape(name);
    var expires = new Date(0);
    path = path == "" ? "" : ";path=" + path;
    document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
}

common.js

/**
 * Created by ZhangML on 2019/5/28.
 */
function $(objStr) {
    return document.getElementById(objStr);
}
window.onload = function () {
    //分析cookie值，显示上次的登陆信息
    var userNameValue = getCookieValue("userName");
    $("userName").value = userNameValue;
    var passwordValue = getCookieValue("password");
    $("password").value = passwordValue;
    //写入点击事件
    $("submit").onclick = function () {
        var userNameValue = $("userName").value;//取前台用户名的值
        var passwordValue = $("password").value;//取前台密码的值
        //服务器验证（模拟） 这里是对用户的一个验证．在项目中，你读取数据库的代码写在这
        var isAdmin = userNameValue == "admin" && passwordValue == "123456";
        var isUserA = userNameValue == "userA" && passwordValue == "userA";
        var isMatched = isAdmin || isUserA;
        //如果存在这个用户,就把用户名和密码存进cookie
        if (isMatched) {
            if ($("saveCookie").checked) {//如果勾选记住密码
                setCookie("userName", $("userName").value, 24, "/");//缓存用户名userName=$("userName").value,过期时间24,Path/
                setCookie("password", $("password").value, 24, "/");//缓存用户密码,过期时间,Path
            }
            alert("登陆成功,欢迎你," + userNameValue + "!");
            self.location.replace("welcome.html");//跳转到欢迎页
        }
        else alert("用户名或密码错误，请重新输入！");
    }
}