web实现登录，记住密码功能（cookie）

最新推荐文章于 2024-03-21 10:46:00 发布
最新推荐文章于 2024-03-21 10:46:00 发布
阅读量2.5w 收藏 43
点赞数 9
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37164847/article/details/82700589
版权

界面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.cookie.js"></script>
        <script src="js/jquery.base64.js"></script>
        <style  type="text/css"> 
            html,body{
                height:100%;
                width:100%;
                background-color: #53E3A6;
            }
            .div1{
                height: 300px;
                width: 400px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -150px;
                margin-left: -200px;
                background: #F0F0F0;
                text-align: center;
                padding-top: 10px;
            }
        </style>
    </head>
    <body  οnlοad="getCookie();">
        <div class="div1">
            <h2>后台管理系统</h2>
            <div>
                <div style="margin: 10px;">
                  <input id="zhanghao" type="text" name="zhanghao" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" value="admin">
                </div>
                <div style="margin: 10px;">
                  <input id="mima" type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" value="123456">
                </div>
                <div style="margin: 10px;">
                    <input style="position: absolute;left: 10px;width: 20px;height: 20px;" type="checkbox" name="jizhu" title="发呆" lay-skin="primary">
                    <span style="position: absolute;left: 40px;">记录密码</span>
                </div>
                <div style="margin-top: 50px;">
                    <button id="denglu" class="layui-btn" style="width: 200px;">登录</button>
                </div>
            </div>
        </div>
        <script>
            //var loginurl="http://localhost:8088/register";
            var loginurl="http://localhost:8088/login";
            $("#denglu").click(function(){
                login();
            });
            //设置cookie  
            function setCookie(){   
                 var loginCode = $("#zhanghao").val(); //获取用户名信息    
                 var pwd = $("#mima").val(); //获取登陆密码信息    
                 var checked = $("input[type='checkbox']").is(':checked');//获取“是否记住密码”复选框  
                   //console.log("setCookie方法是否记住密码："+checked);
                 if(checked){ //判断是否选中了“记住密码”复选框    
                     //设置cookie过期时间
                     var date = new Date();
                    date.setTime(date.getTime()+60*1000);//只能这么写，60表示60秒钟
                    //console.log("cookie过期时间："+date);
                    $.cookie("login_code",loginCode,{ expires: date, path: '/' });//调用jquery.cookie.js中的方法设置cookie中的用户名    
                    $.cookie("pwd",$.base64.encode(pwd),{ expires: date, path: '/' });//调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64（jquery.base64.js）进行加密
                 }else{     
                     $.cookie("login_code", null);  
                    $.cookie("pwd", null);     
                 }      
            } 
            
            //清除所有cookie函数
            function clearAllCookie() {
                var date=new Date();
                date.setTime(date.getTime()-10000);
                var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
                console.log("需要删除的cookie名字："+keys);
                if (keys) {
                    for (var i =  keys.length; i--;)
                      document.cookie=keys[i]+"=0; expire="+date.toGMTString()+"; path=/";
                }
            }
            //获取cookie    
            function getCookie(){ 
                 var loginCode = $.cookie("login_code"); //获取cookie中的用户名    
                 var pwd =  $.cookie("pwd"); //获取cookie中的登陆密码  
                 console.log("获取cookie:账户："+loginCode);
                 console.log("获取cookie:密码："+pwd);
                 if (!loginCode||loginCode==0) {
                      console.log("账户："+!loginCode);
                      //alert("请输出内容！");
                 }else{
                     $("#zhanghao").val(loginCode);   
                 }
                 if(!pwd||pwd==0){
                     console.log("密码："+!pwd);
                 }else{
                     //密码存在的话把密码填充到密码文本框    
                     //console.log("密码解密后："+$.base64.decode(pwd));
                    $("#mima").val($.base64.decode(pwd));
                    //密码存在的话把“记住用户名和密码”复选框勾选住    
                    $("[name='jizhu']").attr("checked","true");
                 }
                     
            } 
            function login(){     
                var userName = $('#zhanghao').val(); 
                console.log("用户名："+userName);
                if(userName == ''){    
                    alert("请输入用户名。");    
                    return;    
                }    
                var userPass =$('#mima').val(); 
                console.log("密码："+userPass);
                if(userPass == ''){    
                    alert("请输入密码。");    
                    return;    
                }  
                //判断是否选中复选框，如果选中，添加cookie  
                var jizhupwd=$("input[type='checkbox']").is(':checked');
                console.log("是否记住密码："+jizhupwd);
                if(jizhupwd){    
                    //添加cookie    
                    setCookie();      
                }else{    
                    clearAllCookie();
                }  
                netWorking(userName,userPass);//联网上传账号密码
            }
            function netWorking(zhanghao,mima){
                    $.ajax({
                        type:"post",    
                        url:loginurl,    
                        data:{
                             username:zhanghao,  //期刊id
                             password:mima, 
                        }, 
                        success: function(res) {
                           console.log("请求数据1.："+res);
                           console.log("请求数据2.："+JSON.stringify(res));
                           var datas=eval(res);
                           var ticket=datas.ticket;
                              //var ticket=datas.msg;
                           console.log("请求数据2.："+ticket);
                           if (ticket==undefined) {
                                 alert("请您先注册");
                           } else{
                               window.location.href='htmls/home.html';
                           }
                        },
                        error:function() { 
                            alert("失败");
                       } 
                    });
            }

        </script>
    </body>
</html>

大海无量波涛凶
关注
  • 9
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js form表单，登录之后保存用户的账号和密码在浏览器，下次登录快速填充
PrimaryColor
10-12 882
效果图： 登录之后，浏览器保存登陆的账号和密码，只需要添加form标签嵌套输入框就可以了。 <form>...</form>
JS读取cookie（记住账号密码）
09-19
完全用JS实现的读取cookie（记住账号密码）源码。
JavaWeb 中Cookie实现记住密码的功能示例
08-30
cookie是一种WEB服务器通过浏览器在访问者的硬盘上存储信息的手段。Cookie的目的就是为用户带来方便，为网站带来增值。这篇文章主要介绍了JavaWeb 中Cookie实现记住密码的功能示例,需要的朋友可以参考下
Java Web登录自动填入用户名密码
04-15
实现一个登录页面，如果用户复选记住用户名、密码，则下次访问页面时，将会自动在用户名、密码字段填入上次登录时所使用的值。
vue3_记住密码功能实现（cookie与sessionStorage，sessionStorage区别以及js-cookie/jsencrypt加密）
最新发布
qq_45104829的博客
03-21 479
此处我使用的是Cookie来实现记住密码功能（js-cookie）,使用jsencrypt对密码进行加密解密。可看到储存的cookie。
java web中使用cookie记住用户的账号和密码
08-31
主要介绍了java web中使用cookie记住用户的账号和密码的相关资料,需要的朋友可以参考下
Vue中登录页面记住密码，并使用crypto-js加密
~~
05-17 3703
主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：https://blog.csdn.net/qq_40323256/article/details/116838848 一、下载js-cookie cnpm i -S js-cookie 二、main.js中全局引入 import Cookies from 'js-cookie' Vue.prototype.$cookie = Cookies; 三、使用 <el-checkbox v-model="rem..
uniapp+uviewUI实战之记住账号密码
Growing up Or Growing old
04-11 1977
前言 实际开发中，为了方便用户进行登录以及为了用户的体验感，在密码框下常常会添加一个复选框用作记住账号密码。话不多说，直接步入主题。 核心代码 HTML <u-form-item prop="rememberPsw"> <u-checkbox-group> <u-checkbox v-model="loginForm.rememberPsw" shape="circle" @change="loginForm.rememberPsw=!lo
Java 开发一个 web 包含登录 记住密码（四）
m0_74288745的博客
05-14 113
【代码】Java 开发一个 web 包含登录 记住密码（四）
Web 实现登录记住密码功能
平凡的人类的博客
08-14 2797
HTML <form id="nameLoginForm"> 账户名：<input type="text" name="name" id="name" class="input-text" autocomplete="off" placeholder="用户名/邮箱/手机号" /> 密码：<input type="password" name="p...
设置session和cookie的类，安全。
web开发专栏
10-19 719
 class h863_global{    static function set_global($key,$value)    {        if($value=="")        {            $_SESSION[$key]=$value;            unset($_SESSION[$key]);            setcookie($key,$
Java 开发一个 web 包含登录 记住密码
m0_74288745的博客
05-14 667
4.开发记住密码功能：在登录成功后，用户可以选择是否记住密码。如果用户选择记住密码，则我们需要将登录名和密码存储到用户表中，并设置一个cookie，以便下次登录时自动填充登录表单。如果用户没有选择记住密码，则我们需要删除用户表中的记录和cookie。3.开发登录功能：在后端，我们可以使用Spring Security框架来实现登录认证功能。2.设计数据库：我们需要设计一个用户表，用于存储用户的登录名、密码和记住密码状态。5.开发注销功能：我们需要提供一个注销功能，以便用户可以退出登录。
Web应用安全：HTTPCookie的作用.pptx
06-17
另外，记住用户登录后的认证状态也是一种常见的需求。虽然使用 HTTP 认证就能使浏览器记住 ID 和密码，但不使用 HTTP 认证时，记忆认证状态的任务就落在了服务器身上。而像这种记忆应用程序状态的功能就叫作“会话...
“记住我的密码”复选框消失不见问题的修复
甲骨文进行曲
10-13 2440
       单位上外网用的是代理，这样每次上网的时候IE会弹出对话框要求输入用户名和密码，这就带来了问题，有些同同事的机器在弹出的输入对话框中有”记住我的密码“复选框，这样一来下次再上网的时候直接“确定”就行，省的每次都要输入用户名和密码，避免了很多麻烦，但是有的同事的机器上就是不显示，究其原因，关键在于注册表中的一个键值：DisablePasswordCaching，当这个值为0时，表示不禁止，此时方能显示“记住我的密码”复选框，因此问题就好办了，在注册表中搜索改键，将其值改为0即可，当然为了保护自己的
登录时点击checkbox记住用户名和密码功能
各位看官欢迎来到webshao,点个赞支持下咯!
06-02 930
功能： 1.勾选记住用户名和密码时，将所输入的用户名和密码保存，下次登录时无需输入 2.不勾选时用户名和密码输入框将为空
如何使用Cookie来保存用户的登录信息
微信公众号：一颗向上的草莓
07-31 4168
1.登录成功后生成Cookie响应给客户端 登录成功之后将登录用户的id，用户类型，用户来源平台，登录时间等信息序列化成字符串，然后再通过对称加密，生成一个字符串作为cookie的value值响应给客户端。 代码如下： public void createCookieAndRegisterDevice(LoginVO loginVO, HttpServletRequest httpServ...
如何利用js操作cookie实现记住密码功能
weixin_34290096的博客
08-31 310
【什么是cookie】 “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——w3school 不同的浏览器可...
记住用户登录密码 html,登录页面使用Cookie 记住密码
weixin_34702885的博客
06-08 390
js COOKIE 记住帐号或密码function onLoginLoaded(){if(isPostBack == "False"){GetLastUser();}}function GetLastUser(){var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";var usr = GetCookie(id);if(usr != null){docum...
【用户登录案例】在用户登录使用cookie和session，用来记住用户名和密码
weixin_52226593的博客
01-25 773
表现层 @WebServlet("/UserServlet") public class UserServlet extends HttpServlet { private UserService userService = new UserService(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOExcept
完成使用Filter实现用户自动登录任务代码的编写。
06-01
好的，下面是使用 Filter 实现用户自动登录的代码示例： Filter代码： ```java public class AutoLoginFilter implements Filter { private String username; private String password; private String rememberMe; @Override public void init(FilterConfig filterConfig) throws ServletException { // 读取配置文件中的用户名、密码和记住我选项 username = filterConfig.getInitParameter("username"); password = filterConfig.getInitParameter("password"); rememberMe = filterConfig.getInitParameter("rememberMe"); } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req = (HttpServletRequest) request; HttpServletResponse resp = (HttpServletResponse) response; HttpSession session = req.getSession(); // 判断用户是否已经登录 if (session.getAttribute("user") == null) { // 判断用户是否选择了记住我 Cookie[] cookies = req.getCookies(); String cookieUsername = null; String cookiePassword = null; String cookieRememberMe = null; if (cookies != null) { for (Cookie cookie : cookies) { if (cookie.getName().equals("username")) { cookieUsername = cookie.getValue(); } if (cookie.getName().equals("password")) { cookiePassword = cookie.getValue(); } if (cookie.getName().equals("rememberMe")) { cookieRememberMe = cookie.getValue(); } } } if (username.equals(cookieUsername) && password.equals(cookiePassword) && "true".equals(cookieRememberMe)) { // 用户已经选择了记住我并且Cookie中保存的用户名和密码与配置文件中的相同，将用户信息存入Session中 session.setAttribute("user", new User(username, password)); } } chain.doFilter(request, response); } @Override public void destroy() { } } ``` 使用方法： 1. 在 web.xml 文件中配置过滤器和过滤器参数： ```xml <filter> <filter-name>AutoLoginFilter</filter-name> <filter-class>com.example.AutoLoginFilter</filter-class> <init-param> <param-name>username</param-name> <param-value>admin</param-value> </init-param> <init-param> <param-name>password</param-name> <param-value>admin</param-value> </init-param> <init-param> <param-name>rememberMe</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>AutoLoginFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> ``` 2. 在登录页面中添加记住我选项，用户勾选后，将用户名、密码和记住我选项保存到 Cookie 中： ```java if (rememberMe != null) { Cookie usernameCookie = new Cookie("username", username); usernameCookie.setMaxAge(60 * 60 * 24 * 7); // 保存一周 resp.addCookie(usernameCookie); Cookie passwordCookie = new Cookie("password", password); passwordCookie.setMaxAge(60 * 60 * 24 * 7); // 保存一周 resp.addCookie(passwordCookie); Cookie rememberMeCookie = new Cookie("rememberMe", "true"); rememberMeCookie.setMaxAge(60 * 60 * 24 * 7); // 保存一周 resp.addCookie(rememberMeCookie); } ``` 注意：在实际开发中，为了安全起见，保存到 Cookie 中的密码应该进行加密处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值