LayUI记住密码功能

文章目录

• 前言
• 一、效果与逻辑
• 二、使用步骤
• • 1.html
  • 2.js
• 三、总结
• 四、补充

---

前言

为了提高客户用户体验，每一个管理系统都有自己的记住密码功能。让客户减少账号与密码的输入，从而提高客户的体验

一、效果与逻辑

• 效果
  

• 逻辑
  没有选择记住密码，会记录用户名
  有选择记住密码，会记住密码，下次不用输入

二、使用步骤 1.html

代码如下（示例）：

  <form class="layui-form" action="" lay-filter="add_form">
        <div class="layui-form-item logo-title">
             <h1>后台登录</h1>
        </div>

       <div class="layui-form-item">
           <label class="layui-icon layui-icon-username" for="username"></label>
         <input type="text" name="userName" lay-verify="required|account" placeholder="用户名"
                           autocomplete="off" class="layui-input">
       </div>

      <div class="layui-form-item">
         <label class="layui-icon layui-icon-password" for="password"></label>
         <input type="password" name="userPwd" lay-verify="required|password" placeholder="密码"
                           autocomplete="off" class="layui-input">
       </div>

      <div class="layui-form-item">
           <input type="checkbox" lay-filter="remember" name="rememberMe" id="rememberMe" value="true"
                           lay-skin="primary" title="记住密码">
       </div>

     <div class="layui-form-item">
          <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
                            lay-filter="login">登 入
          </button>
     </div>
 </form>

2.js

layui.use(['form', 'jquery', 'jquery_cookie', 'request'], function () {
    var form = layui.form;
    var $ = layui.jquery;
    $ = layui.jquery_cookie($);

    /*记住用户名和密码*/
    let userPwd = localStorage.userPwd
    if (userPwd != undefined) {
        $("#rememberMe").prop("checked", true);
        form.val("add_form", {
            "userName": localStorage.userName,
            "userPwd": userPwd
        })
    } else {
        let userName = localStorage.userName;
        if (userName != undefined) {
            form.val("add_form", {
                "userName": userName
            })
        }
    }

    //粒子线条背景
    $(document).ready(function () {
        $('.layui-container').particleground({
            dotColor: '#7ec7fd',
            lineColor: '#7ec7fd'
        });
    });

    //请求-自定义封装好
    let rq = layui.request;
    //登录  表单提交
    form.on("submit(login)", function (data) {
        //1、获取表单元素的值 （用户名 + 密码）
        let fieldData = data.field;
        //2、正式请求
        rq.get('/user/login', fieldData).then(res => {
            $.cookie("token",res)
            $.cookie("userName",fieldData.userName)
            localStorage.setItem("userName",fieldData.userName)

            if (fieldData.rememberMe == 'true') {
                localStorage.setItem("userPwd",fieldData.userPwd)
            } else {
                localStorage.removeItem('userPwd');
            }
            // 登录成功后，跳转到首页
            window.location.href = ctx + "/main";
        })
        //3、阻止表单跳转
        return false;
    });

});

三、总结

把用户名和密码，存在本地 localStorage

token，可以存在cookie

四、补充

存: localStorage.setItem(keyName,String)
取: localStorage.keyName
存cookie:$.cookie(“token”,res)

如果能帮到你，记得👍点赞，⭐收藏，关注！！谢谢