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方法的调用:

<input type="checkbox" id="rememberMe" checked="checked"/>记住密码

存入cookie

  • 判断帐号密码无误后将用户名密码存入cookie
if($('#rememberMe').is(':checked')){
             setCookie('customername', $('#username').val().trim(), 7)
             setCookie('customerpass', $('#password').val().trim(), 7)
           }

自动填充

  • 进入登录界面后,判断cookie中是否有帐号密码,如果有就自动填充
复制代码
$(function(){

  //获取cookie
  var cusername = getCookie('customername');
  var cpassword = getCookie('customerpass');
  if(cusername != "" && cpassword != ""){
    $("#username").val(cusername);
    $("#password").val(cpassword);
  }
}
复制代码

 

posted @   笠航  阅读(792)  评论(1编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示