专栏首页前端实习日记JS:js操作Cookie实现记住密码功能

JS:js操作Cookie实现记住密码功能

前言

今天主管让我给工单系统填个小功能,就是在上面加一个记住密码。提示了我一句用到cookie就走了,我今天是研究了一天cookie啊,下面有三段操控cookie封装好的函数,能延伸出好多东西 大家看到哪里觉得哪里不扎实 这是个很好的积累机会

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
        姓名:
        <input type="text" id="username"/>
        密码:
        <input type="password" id="password"/>
        <input type="checkbox" id="memory"/><label for="memory">记住密码</label>
        <input type="button" value="提交" id="btn"/>
    </form>
    <script src="js/jquery-2.1.0.js"></script>
    <script>
        $(function(){
            if(getCookie('name')&&getCookie('password')){
                $('#username').val(getCookie('name'));
                $('#password').val(getCookie('password'));
                $('#memory').prop('checked','checked');
            }
            else{
                $('#username').val('');
                $('#password').val('');
            }
        });
        $('#btn').click(function(){
            if($('#memory').prop('checked')){
                var username = $('#username').val();
                var password = $('#password').val();
                setCookie("name",username);
                setCookie("password",password);
            }
            else{
                delCookie('name');
                delCookie('password');
            }
        });
//        主要函数
        function setCookie(name,value)//设置cookie
        {
            var Days = 30;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days*24*60*60*1000);
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
        }

        function getCookie(name)//拿到cookie
        {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        function delCookie(name)//删除cookie
        {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(name);
            if(cval!=null)
                document.cookie= name + "="+cval+";expires="+exp.toGMTString();
        }
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 笔记:总结require和import的区别

    require是这个老一辈码农们在es6规范之前的规范中使用的命令,之前的规范有CommonJS规范、AMD、CMD、还有一个UMD,那为什么是require不...

    yuezhongbao
  • 原生:点击加入购物车的动画

    yuezhongbao
  • 全局作用域、函数作用域、块级作用域的理解

    ES6中新增的概念,在ES5中是没有的,ES5中没有? 没有的时候我们代码也写的好好的,现在新增的概念,我不用不行吗? 来,拋一个典型的问题出来,你就明白块级作...

    yuezhongbao
  • asp.net产生客户端Cookie与js操作Cookie大全

    Js操作Cookie封装的代码[各个浏览器测试兼容]: 1 function SetCookie(name, value)//两个参数,一个是cookie的名...

    Java中文社群_老王
  • su: Authentication failure

    青木
  • Java基础-25(03)图形用户界面编程GUI

    B:登录注册 package cn.itcast.util;(1) import java.awt.Dimension; import java.awt.Ima...

    奋斗蒙
  • JavaScript之cookie

    JavaScript通过Cookie实现简单的用户登录状态的保存。Cookie可以跨越多个网页使用,但不能跨域名使用,也不同跨浏览器使用。 1.设置cookie...

    水击三千
  • PHP的cookie与Javascript的cookie的关系

    页面用不同的浏览器访问cookie就存放在不同的地方,比如IE浏览器的cookie存放在 C:\Users\[your computer name]\App...

    lilugirl
  • Python3 初学实践案例(6)终极 CLI 密码生成程序实现

    Python3 初学实践案例(6)终极 CLI 密码生成程序实现 在前面一章的学习中,我已经完成了一个一定扔出 6 的生成密码算法实现。但是只能将生成的密码输出...

    FungLeo
  • Python学习笔记之容器(Collections)

    Jetpropelledsnake21

扫码关注云+社区

领取腾讯云代金券