jquery.cookie.js实现用户登录保存密码功能的方法


Posted in Javascript onApril 15, 2016

本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法。分享给大家供大家参考,具体如下:

需要导入的js有jquery.js和jquery.cookie.js

<script type="text/javascript" src=" jquery-1.5.2.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

在页面加载时首先尝试获取cookie的值,如果cookie有值,则将获取到的值填入输入框中,并将保存密码的复选框选中

jQuery(function(){
 //获取cookie的值
 var username = $.cookie('username');
 var password = $.cookie('password');
 //将获取的值填充入输入框中
 $('#uName').val(username);
 $('#psw').val(password); 
 if(username != null && username != '' && password != null && password != ''){//选中保存秘密的复选框
  $("#remember_password").attr('checked',true);
 }
});

在登录时判断保存密码复选框是否被选中,若选中则创建cookie(有效期可以自己决定,下面的cookie有效期是7天),若没有选中,则删除cookie(因为可能上一次保存了密码,本次登录选择取消保存密码,所以需要删除cookie才能使下次登录时cookie没有值)。
特别注意删除cookie的操作,在网上很多文章使用的方法是$.cookie('username',null),但我使用该方法并不奏效,每次重新登录后cookie都存在,我尝试使用$.cookie('username','')仍然会有问题,程序变得不能保存密码了。

//提交表单的处理函数
function Login()
{
 var uName =$('#uName').val();
 var psw = $('#psw').val();
 if($('#remember_password').attr('checked') == true){//保存密码
  $.cookie('username',uName, {expires:7,path:'/'});
  $.cookie('password',psw, {expires:7,path:'/'});
 }else{//删除cookie
  $.cookie('username', '', { expires: -1, path: '/' });
  $.cookie('password', '', { expires: -1, path: '/' });
 }
 //....
 //提交表单的操作
}

登录页面的保存密码复选框

<input type="checkbox" name="remember_password" id="remember_password"/>
<span id="span_tip" style="margin-bottom:-2px;color:white;font-size:12px;">记住密码
</span>
Javascript 相关文章推荐
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
js自定义回调函数
Dec 13 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
jQuery遍历DOM元素与节点方法详解
Apr 14 #Javascript
jQuery中的基本选择器用法学习教程
Apr 14 #Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 #Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 #Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 #Javascript
详解Jquery实现ready和bind事件
Apr 14 #Javascript
You might like
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
python drf各类组件的用法和作用
2021/01/12 Python
工商治理实习生的自我评价
2014/01/15 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
北京导游词
2015/02/12 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
创卫工作总结2015
2015/04/22 职场文书
交通事故责任认定书
2015/08/06 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python