使用jquery的cookie实现登录页记住用户名和密码的方法


Posted in jQuery onMarch 13, 2019

对于初学者来说,登录页记住用户名和密码的功能是经常会遇到的(通常会用javaee的api去实现),今天为大家介绍在前端页面直接用jquery实现该功能(比传统的方法简单多了),长话短说直接进入正题:

在项目中加入jquery.js和jquery.cookie.js两个依赖文件,并加入对应的页面中如:

<script type="text/javascript" src="${BasePath}/static/assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="${BasePath}/static/assets/js/preloader.js"></script>

form表单

<form role="form" action="/user/login" method="post" id="login_form">
              <div class="form-group">
                <label for="yhm">用户名</label>
                <input type="text" id="yhm" name="yhm" class="form-control" >
              </div>
              <div class="form-group"> 
                <label for="mm">密码</label>
                <input type="password" id="mm" name="mm" class="form-control" >
              </div>
              <div class="checkbox pull-left">
                <label><input type="checkbox" id="remeberyhm">记住用户名</label>
                <span style="color:red;">
                 <#if errMsg??>
                 用户名或密码错误
                 </#if>
                </span>
              </div>
              <button class="btn btn btn-primary pull-right" type="button" onclick="remeber()" >登 录</button>
            </form>

js函数

<script type="text/javascript">
  $(function () {  
   var yhm = $.cookie('yhm');
  
  var mm = $.cookie('mm');
   //页面加载的时候从cookie中取出用户名和密码填充对应的输入框
    $('#yhm').val(yhm);  

 
    $("#mm").val(mm)
    //选中保存秘密的复选框 
  

if(yhm != null && yhm != '' && mm != null && mm != ''){
   $("#remeberyhm").attr('checked',true);
 }
  });
  function remeber(){
   var yhm = $("#yhm").val();
   var mm = $("#mm").val();
   //判断复选框的选择状态添加cookie
   if ($("#remeberyhm").is(":checked")) { 
   

//存储一个带7天期限的cookie
   

$.cookie("yhm", yhm, { expires: 7 });
   

$.cookie("mm", mm, { expires: 7 });
   
}
   
else {  


   

$.cookie("yhm", "", { expires: -1 });
   

$.cookie("mm", "", { expires: -1 });
   
}
   //提交表单
   $("#login_form").submit();
  }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 #jQuery
[jQuery] 事件和动画详解
Mar 05 #jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
jQuery.parseJSON()函数详解
Feb 28 #jQuery
You might like
十天学会php(1)
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
聘任通知书
2015/09/21 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python竟然能剪辑视频
2021/05/25 Python
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL