使用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日程管理控件glDatePicker用法详解
Mar 29 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery实现tab栏切换效果
Dec 22 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
js函数排序的实例代码
2013/07/01 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
python根据出生日期返回年龄的方法
2015/03/26 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python绘制动态水球图过程详解
2020/06/03 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
技校个人求职信范文
2014/01/25 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
邀请函的格式
2015/01/30 职场文书
美术教师个人工作总结
2015/02/06 职场文书