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

 更新时间:2016年04月15日 09:01:32   作者:安索  
这篇文章主要介绍了jquery.cookie.js实现用户登录保存密码功能的方法,结合实例形式详细分析了jquery.cookie.js插件操作cookie实现保存用户登录信息的相关技巧,需要的朋友可以参考下

本文实例讲述了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>

PS:这里再为大家推荐一款非常好用的JavaScript压缩、格式化与加密工具,功能非常强大(对于想让代码加密的朋友不妨试试这里的js加密功能):

JavaScript压缩/格式化/加密工具:http://tools.jb51.net/code/jscompress

另外,上面这款js工具中的加密使用的是eval函数加密形式,对此本站还提供了如下这款针对eval函数加密的解密工具,非常强大实用!

js的eval方法在线加密解密工具http://tools.jb51.net/password/evalencode

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery的cookie操作技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery网页定位导航特效实现方法

    jQuery网页定位导航特效实现方法

    这篇文章主要介绍了jQuery网页定位导航特效实现方法,结合实例形式分析了jQuery网页定位导航的功能描述、原理与核心实现代码,需要的朋友可以参考下
    2016-12-12
  • jQuery setTimeout()函数使用方法

    jQuery setTimeout()函数使用方法

    setTimeout在以前的js中是定时执行一个对象或函数,下面我来介绍jquery中的setTimeout函数使用方法有需要了解的朋友仔细的参考参考
    2013-04-04
  • jQuery timers计时器简单应用说明

    jQuery timers计时器简单应用说明

    大家都知道jQuery很强大,也有很多效果很帅的插件,下面介绍下jQuery定时器插件jQuery Timers,那JS都自带有定时器,为什么要使用Jquery的呢?
    2010-10-10
  • jQuery prototype冲突的2种解决方法(附demo示例下载)

    jQuery prototype冲突的2种解决方法(附demo示例下载)

    这篇文章主要介绍了jQuery prototype冲突的2种解决方法,分析了针对jQuery中添加代码与冲突位置添加代码2种情况,并附带demo示例供读者下载参考,需要的朋友可以参考下
    2016-01-01
  • jQuery实现发送验证码控制按钮禁用功能

    jQuery实现发送验证码控制按钮禁用功能

    最近接到新需求,需要实现一个点击发送验证码之后,按钮禁用,在5秒之后取消禁用,看似需求很简单,实现起来还真的好好动动脑筋,下面小编把jquery控制按钮禁用核心代码分享给大家,需要的朋友参考下吧
    2021-07-07
  • jQuery中click事件用法实例

    jQuery中click事件用法实例

    这篇文章主要介绍了jQuery中click事件用法,以实例形式分析了click事件的具体功能及应用技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • jquery获取下拉列表的值为null的解决方法

    jquery获取下拉列表的值为null的解决方法

    在用jquery获取下拉列表ddl的值时返回的为字符串‘null’,而不是空值,结果导致获取的参数不对
    2011-03-03
  • jQuery弹出div层过2秒自动消失

    jQuery弹出div层过2秒自动消失

    这篇文章主要介绍了jQuery弹出div层过2秒自动消失的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • jQuery插件实现手风琴二级菜单

    jQuery插件实现手风琴二级菜单

    这篇文章主要为大家详细介绍了jQuery插件实现手风琴二级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • animate 实现滑动切换效果【实例代码】

    animate 实现滑动切换效果【实例代码】

    下面小编就为大家带来一篇animate 实现滑动切换效果【实例代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论