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 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
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
香妃
2021/03/03 冲泡冲煮
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
python实现Adapter模式实例代码
2018/02/09 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python tkinter canvas使用实例
2019/11/04 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
学习十八大报告感言
2014/02/28 职场文书
服装采购员岗位职责
2014/03/15 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
员工工作自我评价
2014/09/26 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2014年老干部工作总结
2014/11/21 职场文书
出生证明范本
2015/06/15 职场文书