jquery实现记住登录的用户名和密码

最新推荐文章于 2022-12-06 14:02:46 发布

原创最新推荐文章于 2022-12-06 14:02:46 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#cookie #session

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种利用Cookie保存用户登录信息的方法，包括如何在页面加载时检查并填充已保存的用户名和密码，以及在登录成功后更新Cookie的详细步骤。

记住登录的用户名和密码一般都选择用cookie来记录

首先需要在页面中引入jq和cookie的相关js

jquery.min.js和jquery.cookie.js

然后就是给添加input标签,用户名,密码,和记住密码

 <input id="username" name="username" placeholder='用户名' maxlength="16" type='text' autocomplete="off"/>
<input id="password" name="password"  placeholder='密码' maxlength="16" type='password' autocomplete="off">
记住密码&nbsp;&nbsp;<input type="checkbox" id="remember"/>

然后就是在javascript中添加对应的js

 $(document).ready(function(){
        var rem = $.cookie('remember');
        if(rem){
            $("#remember").prop("checked",true);
            $("#username").val($.cookie("username"));
            $("#password").val($.cookie("password"));
        }
    });

上面这个是在登录页面判断是否勾选记住密码的js函数

//保存到cookie
    function save_cookies(){
        if($("#remember").prop("checked")){
            var username = $("#username").val();
            var password = $("#password").val();

            $.cookie("remember","true",{expires:7});
            $.cookie("username",username,{expires:7 });
            $.cookie("password",password,{expires:7 });
        }else{
            $.cookie("remember","false",{expires:-1});
            $.cookie("username","",{ expires:-1 });
            $.cookie("password","",{ expires:-1 });
        }
    };

这段代码是保存cookie,我们在什么时候调用这个方法呢,就是在登录成功跳转页面的方法中添加这个save_cookies()就可以实现对cookie的保存了