使用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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现弹窗(系统提示框)效果
Dec 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
Python进阶之递归函数的用法及其示例
2018/01/31 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
一看就懂得Python的math模块
2018/10/21 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
中国高端家电购物商城:顺电
2018/03/04 全球购物
Internet体系结构
2014/12/21 面试题
个人承诺书
2014/03/26 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
招商引资工作汇报
2014/10/28 职场文书