前言

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

一、效果与逻辑

效果

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

二、使用步骤

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.userPwdif (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)

如果能帮到你，记得

LayUI记住密码功能(已实现)相关推荐

AppCan用cookie实现记住密码功能 [APP]
今天想做个在应用上记住密码的功能.想了一下,先用COOKIE来测试.COOKIE保存在客户端. 关于COOKIE在手机上安不安全的问题,以后再讨论. 其实想过在手机上创建文件保存密码,但是,没有时间, ...
vue 登录页面记住密码功能
vue+iview/element 一般用来快速搭建后台管理系统,登录页的记住密码功能也是必不可少的. 记住密码快速登录功能(iview ui): 思路:首次登录,记住密码,将密码存储到cookie中 ...
PHP会员登录实现记住密码功能 thinkPHP5
会员登录实现记住密码功能需要用到cookie 和session,首先我们来简单了解一下cookie 和session 的区别 Cookie Cookie是完全保存在客户端.当客户端禁止cookie时将 ...
【html实现记住账号、记住密码功能】
html实现记住账号.记住密码功能效果图: 1.页面添加记住账号.记住密码多选框 <div class="remember" style="text-align: ...
vue考试系统后台管理项目-登录、记住密码功能
考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组考试管理模块:新增/编辑/删除考试试题 ...
java记住密码 cookie_Java Web网站怎么利用Cookie实现记住密码功能
在做java web网站开发时,为了避免每次登录都需要输入用户名和密码,我们会使用Cookie技术来实现记住密码功能,在这里小编使用简单的项目案例来教大家具体的实现过程. 前期准备 1.下载好jque ...
PyQt5实现登录界面，包含用户注册，记住密码功能
本文主要基于PyQt5用的是qt designer,连接MySQL实现登录界面,包含注册功能,记住密码功能,说明这一切都是基于在pycharm上配置好了pyuic和qt designer 目录 1.实 ...
php记住密码怎么写,PHP记住密码功能实现例子
记住密码功能我们在许多网站登录时都会看到有这个功能了,下面我们来看一篇基于php的记住密码功能的实现方法,具体的例子如下所示. 提供两个内置的方法,可以在项目中直接使用,很方便/** * 记住密码/清 ...
layui实现记住密码功能
登录的时候大部分都是记住密码这个功能的,最近用layui写项目,顺便把这个常用的功能记录下准备需要layui.jquery.min.js.jquery.cookie.js jquery.cooki ...

LayUI记住密码功能(已实现)

文章目录

前言

一、效果与逻辑

二、使用步骤

1.html

2.js

三、总结

四、补充

LayUI记住密码功能(已实现)相关推荐

最新文章

热门文章