js中利用cookie实现记住密码功能
2019/6/27 21:41:44
本文主要是介绍js中利用cookie实现记住密码功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下:
HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue"); response.addCookie(username ); response.addCookie(password );
但是为安全起见,我们在后台获取的密码大多是在js中通过MD5加密后的密文,如果将密文放到cookie中,在js中获取到也没有作用;
然后考虑在js中存取cookie,代码如下:
//设置cookie var passKey = '4c05c54d952b11e691d76c0b843ea7f9'; function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + encrypt(escape(cvalue), passKey) + "; " + expires; } //获取cookie function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1){ var cnameValue = unescape(c.substring(name.length, c.length)); return decrypt(cnameValue, passKey); } } return ""; } //清除cookie function clearCookie(cname) { setCookie(cname, "", -1); }
setCookie(cname, cvalue, exdays)三个参数分别是存放的cookie名字、cookie值、cookie有效天数
由于cookie中不能包含等号、空格、分号等特殊字符,我在设置cookie时使用escape() 函数对字符串进行编码,获取cookie时使用unescape()函数解码。但是escape()函数不会对 ASCII 字母和数字进行编码,所以存放到cookie中的账号、密码是以明文存放的,不安全。于是上网找了一个对字符串加密解密算法,该算法需要传两个参数,一个需要加密的字符串,一个自定义加密密钥passKey。设置cookie时使用encrypt(value, passkey)加密,读取cookie时使用decrypt(value, passKey)解密,该算法附在本文最后。
存取cookie方法的调用:
1、定义checkbox
<input type="checkbox" id="rememberMe" checked="checked"/>记住密码
2、判断帐号密码输入无误后调用
if($('#rememberMe').is(':checked')){ setCookie('customername', $('#username').val().trim(), 7) setCookie('customerpass', $('#password').val().trim(), 7) }
3、进入登录界面后,判断cookie中是否有帐号密码,如果有就自动填充
$(function(){ //获取cookie var cusername = getCookie('customername'); var cpassword = getCookie('customerpass'); if(cusername != "" && cpassword != ""){ $("#username").val(cusername); $("#password").val(cpassword); } }
最后附上字符串加密解密算法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于js中利用cookie实现记住密码功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用