使用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中map函数的两种方式
Apr 07 jQuery
Jquery-data的三种用法
Apr 18 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery操作动画完整实例分析
Jan 10 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
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
护士找工作求职信
2014/07/02 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
个人违纪检讨书
2014/09/15 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
Ruby处理CSV数据方法详解
2022/04/18 Ruby
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS