Home > Web Front-end > JS Tutorial > body text

jquery.cookie.js method to implement user login and save password function_jquery

WBOY
Release: 2016-05-16 15:05:25
Original
1678 people have browsed it

The example in this article describes how jquery.cookie.js implements the function of saving passwords for user login. Share it with everyone for your reference, the details are as follows:

The js that need to be imported are jquery.js and jquery.cookie.js

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

Copy after login

When the page loads, first try to get the value of the cookie. If the cookie has a value, fill the obtained value into the input box and select the check box to save the password

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);
 }
});

Copy after login

Determine whether the save password checkbox is selected when logging in. If it is selected, create a cookie (the validity period can be decided by yourself. The cookie below is valid for 7 days). If it is not selected, delete the cookie (because it may have been saved last time). Password, choose to cancel saving the password for this login, so you need to delete the cookie so that the cookie will have no value when you log in next time).
Pay special attention to the operation of deleting cookies. Many articles on the Internet use the method $.cookie('username',null), but it does not work when I use this method. The cookie exists every time I log in again. I try to use $.cookie ('username','') still has problems, the program becomes unable to save passwords.

//提交表单的处理函数
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: '/' });
 }
 //....
 //提交表单的操作
}

Copy after login

Save password checkbox on login page

<input type="checkbox" name="remember_password" id="remember_password"/>
<span id="span_tip" style="margin-bottom:-2px;color:white;font-size:12px;">记住密码
</span>

Copy after login

PS: Here we recommend a very easy-to-use JavaScript compression, formatting and encryption tool, which is very powerful (for those who want to encrypt their code, you may want to try it Try the js encryption function here):

JavaScript compression/formatting/encryption tool: http://tools.jb51.net/code/jscompress

In addition, the encryption in the above js tool uses the eval function encryption form. For this, this site also provides the following decryption tool for eval function encryption, which is very powerful and practical!

JS eval method online encryption and decryption tool: http://tools.jb51.net/password/evalencode

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery cookie operation skills summary", "jQuery table (table) operation skills summary" , "Summary of jQuery drag effects and techniques", "Summary of jQuery extension techniques", "Summary of jQuery common classic special effects", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage summary"

I hope this article will be helpful to everyone in jQuery programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template