关于WEB系统“记住用户名”的实现方案

素颜马尾好姑娘i 2023-06-13 09:46 7阅读 0赞

# 缘起 #

有时候我们做web系统的时候会有需求，用户会希望用户名不需要每次登陆都输入，那么一般会提供一个勾选框，勾选了之后用户登陆之后第二场打开这个登陆页面就不需要再输入用户名了，类似如下这样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70]  
那么这是如何实现的呢？

# 实现思路 #

在用户输入完用户名密码之后，用户点击登陆，登陆JS方法在判断用户勾选了记住用户名选项之后，把当前用户名加入到cookie中，下次页面打开时自动去cookie中读取，如果有值的话显示到对应的用户名文本框中。

# 关键代码-页面 #

<form id="dbw-loginForm" method="post">
         <input id="dbw-in-userName" name="userName" class="dbw-login-admin" type="text" placeholder="请输入用户名"
                iscookie="true"/>
         <input id="dbw-in-password" name="password" class="dbw-login-password" type="password"
                placeholder="请输入密码"/>
         <input id="dbw-btn-login" type="button" class="dbw-login-submit dbw-enterKeyup-eventBind" value="登录"/>
         <label class="dbw-login-remeber con-elm">
             <input id="dbw-btn-remeber" name="remember" type="checkbox" value="yes" class="ace"/>
             <span class="lbl">记住用户名</span>
         </label>
     </form>

# 关键代码-JS #

//页面首次进入时的加载cookie到对应文本框中
    $(function () {
    	//获取记住的用户名并赋值到输入框
        getCookie();
    }
    
    //获取用户名并自动赋值
    function getCookie() {
        $("input[iscookie='true']").each(function (i, o) {
            var $this = $(o),
                cookieName = $this.attr('name');
            $this.val($.cookie(cookieName) || '');
        });
    }
    
    /*执行登录逻辑*/
    function doLogin(orgId) {
        var layer = layui.layer;
    
        //记住用户名
        setCookie();
    	//登陆逻辑代码省略
    }
    
    //把用户名放入到cookie中
    function setCookie() {
        if ($('#dbw-btn-remeber').prop("checked")) {
            $("input[iscookie='true']").each(function (i, o) {
                var $this = $(o);
                $.cookie($this.attr('name'), $this.val(), "/", 24);
                $.cookie("COOKIE_NAME", "true", "/", 24);
            });
        } else {
            $("input[iscookie='true']").each(function (i, o) {
                var $this = $(o);
                $.cookie($this.attr('name'), '');
                $.cookie("COOKIE_NAME", '');
            });
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111522593497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMzI5MzM0MzI=,size_16,color_FFFFFF,t_70