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

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样子。
觉得不错,给个关注给个赞,让我有信心继续前进!

  • 2
    点赞
  • 2
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

hexionly

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值