JavaScript操作cookie实现记住用户名密码功能（一）

hexionly

已于 2023-01-30 14:40:04 修改

阅读量4k

点赞数 24

分类专栏： js 文章标签： html javascript

于 2020-09-15 16:36:53 首次发布

本文链接：https://blog.csdn.net/hsx18787462705/article/details/108601033

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript操作cookie实现记住用户名密码功能（一）

之前说的删除cookie哪里找到解决办法了，就是直接调用setCookie（cname, cvalue, -1），传值的时候时间传入-1，就是前一天就可以了。

由来简述

最近一段时间在使用springboot编写一个简单的小系统，但是写到登录注册时，突然想给登录加上一点小功能，但是写的时候有点模糊，然后向w3school求助了一下，之后自己有在那基础上有一些改动，达到了一个很好的样例，如果觉得好的给个关注，给个赞。

参考链接：https://www.w3school.com.cn/js/js_cookies.asp

主要实现了如下的一些功能：
1、页面加载完检测是否有cookie，有的话，把cookie值放入输入框中，复选框选中
2、存入cookie
3、获取cookie值
4、删除cookie，在删除cookie时调用了一个函数（我觉得这里还可以优化一下，但在下能力有限，网友大神友有好思路）
5、当复选框改变时存入cookie或是删除cookie
废话不多说，看代码：

前端HTML代码

	<form>
        用户名：<input type="text" name="username" id="username"><br>
        密码<input type="text" name="password" id="password"><br>
        <input type="checkbox" name="checkbox" id="checkbox">记住我
    </form>

没了就这没简单，但实现此博客的功能足以。

存入cookie的JavaScript代码
代码的注释我的把每一个步骤写的很详细，仔细看，一定可以看得懂。

// 存入cookie
            /**
             * cname:存入的属性名称
             * cvalue:存入的值
             * exdays:过期时间
             */ 
            function setCookie(cname, cvalue, exdays){
                // 获取当前时间
                // 调用时间函数
                var date = new Date();
                // 设置过期的时间，day
                // getTime()获取的不是我们本地的，比我们晚8小时，但不影响我接下来的操作
                // (exdays*24*60*60*1000)几天时间
                date.setTime(date.getTime()+(exdays*24*60*60*1000));
                // 时间转换格式
                var expires = "expires =" + date.toGMTString();
                // 存入cookie
                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
            }

在这里给个建议下边这个写在最前边，方便后边调用。

var check = document.getElementById("checkbox");

读取cookie值

/**
             * 取出cookie中的值,根据名称
             */
            function getCookie(cname){
                // 定义一个name属于key的部分
                var name = cname + "=";
                // 把cookie中的内容根据;分割成数组
                var ca = document.cookie.split(";");
                //遍历数组
                for(var i = 0; i < ca.length; i++){
                    // 把遍历出来的内容存放入一个变量中
                    var c = ca[i];
                    // 去除收尾空格
                    while(c.charAt(0) == " "){//charAt(index),提取字符串中第几号字符
                        c = c.substring(1); //substring(start, end) 
                                           //获取这个区间的内容，只有一个表示从他之后的所有值
                    }
                    // 如果首位没有空格，就判断name字符串是否是c字符串的第一段
                    // 是的话就满足要求
                    if(c.indexOf(name) == 0){
                        return c.substring(name.length, c.length);
                    }
                }
                // 倘若cookie中没有存放有值，就返回空
            return "";
            }

删除已有cookie

/**
            *   删除cookie，我通过把过期时间设置到过去的某一时刻
            * 根据名称删除， cname
            */
            function deleteCookie(cname){
                // 和设置时一样，先获取当前时间函数
                var date = new Date();
                // 把时间设置到当前时间的前一天
                date.setTime(date.getTime()-(24*60*60*1000));
                // 时间格式转换
                var expires = "expires =" + date.toGMTString();
                return document.cookie = cname + ";" + expires + ";path=/";
            }

删除cookie时我要先找到cookie的值：cname + “=” + cvalue，这一部分内容来自setCookie（）；在这里我把他归到一起为deleteCookie(cname)；

// 获取cookie的deleteCookie()中cname
            function getCname(){
                // 把cookie中的内容根据;分割成数组
                var ca = document.cookie.split(";");
                return ca[0];
            }

下边就是页面加载完就直接检测是否有cookie
这里我又加一个建议，页面加载完执行，可以有两种方法：
其一：我们直接使用如下：

//页面加载完执行
        window.onload = function(){
		//这里边写那些代码，但是要注意这么写，你就要调用哪个检查函数
		// 页面加载完就检测是否有cookie
            checkCookie();
            //这个马上就来
		}

其二：使用onload事件调用checkCookie();

<body onload="<body>">
	//这里是HTML代码
</body>

我的这篇是使用其一。
有了上边就可以加上下边了

// 检测是否存入了cookie
            function checkCookie(){
                // 获取cookie中的值
                var user = getCookie("username");
                var pass = getCookie("password");
                // 判断从cookie中取出的值是否有内容
                // 有，把他放入相应的输入框中显示，复选框显示勾选
                // 没有就输入
                if(user != "" && pass != ""){
                    // alert(user);
                    // 如果cookie中有值并且不为空，就直接填在输入框中，且复选框勾选
                    document.getElementById("username").value = user;
                    document.getElementById("password").value = pass;
                    check.checked = true;
                }else{ // 否则，先把复选框清空，获取输入框中的内容
                    // check.checked = false;
                    var username = document.getElementById("username").value;
                    var password = document.getElementById("password").value;
                    // 判断输入不为空存入cookie
                    if(username != "" && username != null 
                        && password != "" && password != null){
                        setCookie("username", username, 1);
                        setCookie("password", password, 1);
                    }
                }
            }
            // 页面加载完就检测是否有cookie
            checkCookie();

页面加载完首先就先执行这个。

控制存入/删除cookie的操控

//复选框变动，添加cookie或者是删除cookie
            check.onchange = function(){
                // 检测并设置cookie
                if(check.checked == true){
                    checkCookie();
                }else{ // check.checked == false，取消勾选
                    // 删除cookie
                    for(var i = 0; i < 2; i++){ // 这个2是存入cookie的元素个数，
                        var get = getCname();// 手动修改，你的有几个就改为几个
                        deleteCookie(get);
                    }
                    // 删除之后把检测时放入输入框的内容去除
                    document.getElementById("username").value = "";
                    document.getElementById("password").value = "";
                }
            }

复选框选中 / 没选中的操作。
到此所有的操作就结束了。

完整的代码我贴在这

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie 记住账号密码</title>

    <script>
        //页面加载完执行
        window.onload = function(){
            var check = document.getElementById("checkbox");

            // 存入cookie
            /**
             * cname:存入的属性名称
             * cvalue:存入的值
             * exdays:过期时间
             */ 
            function setCookie(cname, cvalue, exdays){
                // 获取当前时间
                // 调用时间函数
                var date = new Date();
                // 设置过期的时间，day
                // getTime()获取的不是我们本地的，比我们晚8小时，但不影响我接下来的操作
                // (exdays*24*60*60*1000)几天时间
                date.setTime(date.getTime()+(exdays*24*60*60*1000));
                // 时间转换格式
                var expires = "expires =" + date.toGMTString();
                // 存入cookie
                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
            }
    
            /**
             * 取出cookie中的值,根据名称
             */
            function getCookie(cname){
                // 定义一个name属于key的部分
                var name = cname + "=";
                // 把cookie中的内容根据;分割成数组
                var ca = document.cookie.split(";");
                //遍历数组
                for(var i = 0; i < ca.length; i++){
                    // 把遍历出来的内容存放入一个变量中
                    var c = ca[i];
                    // 去除收尾空格
                    while(c.charAt(0) == " "){//charAt(index),提取字符串中第几号字符
                        c = c.substring(1); //substring(start, end) 
                                           //获取这个区间的内容，只有一个表示从他之后的所有值
                    }
                    // 如果首位没有空格，就判断name字符串是否是c字符串的第一段
                    // 是的话就满足要求
                    if(c.indexOf(name) == 0){
                        return c.substring(name.length, c.length);
                    }
                }
                // 倘若cookie中没有存放有值，就返回空
            return "";
            }

            /**
            *   删除cookie，我通过把过期时间设置到过去的某一时刻
            * 根据名称删除， cname
            */
            function deleteCookie(cname){
                // 和设置时一样，先获取当前时间函数
                var date = new Date();
                // 把时间设置到当前时间的前一天
                date.setTime(date.getTime()-(24*60*60*1000));
                // 时间格式转换
                var expires = "expires =" + date.toGMTString();
                return document.cookie = cname + ";" + expires + ";path=/";
            }

            // 获取cookie的deleteCookie()中cname
            function getCname(){
                // 把cookie中的内容根据;分割成数组
                var ca = document.cookie.split(";");
                return ca[0];
            }
            
            // 检测是否存入了cookie
            function checkCookie(){
                // 获取cookie中的值
                var user = getCookie("username");
                var pass = getCookie("password");
                // 判断从cookie中取出的值是否有内容
                // 有，把他放入相应的输入框中显示，复选框显示勾选
                // 没有就输入
                if(user != "" && pass != ""){
                    // alert(user);
                    // 如果cookie中有值并且不为空，就直接填在输入框中，且复选框勾选
                    document.getElementById("username").value = user;
                    document.getElementById("password").value = pass;
                    check.checked = true;
                }else{ // 否则，先把复选框清空，获取输入框中的内容
                    // check.checked = false;
                    var username = document.getElementById("username").value;
                    var password = document.getElementById("password").value;
                    // 判断输入不为空存入cookie
                    if(username != "" && username != null 
                        && password != "" && password != null){
                        setCookie("username", username, 1);
                        setCookie("password", password, 1);
                    }
                }
            }
            // 页面加载完就检测是否有cookie
            checkCookie();

            //复选框变动，添加cookie或者是删除cookie
            check.onchange = function(){
                // 检测并设置cookie
                if(check.checked == true){
                    checkCookie();
                }else{ // check.checked == false，取消勾选
                    // 删除cookie
                    for(var i = 0; i < 2; i++){ // 这个2是存入cookie的元素个数，
                        var get = getCname();// 手动修改，你的有几个就改为几个
                        deleteCookie(get);
                    }
                    // 删除之后把检测时放入输入框的内容去除
                    document.getElementById("username").value = "";
                    document.getElementById("password").value = "";
                }
            }
        }
    </script>

</head>
<body>
    <form>
        用户名：<input type="text" name="username" id="username"><br>
        密码<input type="text" name="password" id="password"><br>
        <input type="checkbox" name="checkbox" id="checkbox">记住我
    </form>
</body>
</html>

注意：操作cookie最好不要选用Chrome浏览器，他不支持js操作cookie
给个示例图：
赋值前：
在这里插入图片描述
赋值打勾后：

当把√取消，立刻又回到图1样子。
觉得不错，给个关注给个赞，让我有信心继续前进！

hexionly

关注

24
点赞
踩
36

收藏

觉得还不错? 一键收藏
2
评论
JavaScript操作cookie实现记住用户名密码功能（一）

JavaScript操作cookie实现记住用户名密码功能（一）由来简述最近一段时间在使用springboot编写一个简单的小系统，但是写到登录注册时，突然想给登录加上一点小功能，但是写的时候有点模糊，然后向w3school求助了一下，之后自己有在那基础上有一些改动，达到了一个很好的样例，如果觉得好的给个关注，给个赞。参考链接：https://www.w3school.com.cn/js/js_cookies.asp主要实现了如下的一些功能：1、页面加载完检测是否有cookie，有的话，把co
复制链接

扫一扫