JS中使用Cookie实现记住密码以及设置密码过期时间

在JavaScript中,可以使用`document.cookie`来操作和获取cookie。

要记住密码,可以在用户登录成功后,设置一个带有用户名和密码的cookie,设置过期时间为一段较长的时间,比如一周。当用户再次访问网站时,可以先检查是否存在该cookie,如果存在则自动填充用户名和密码。

下面是一个示例代码:
// 设置cookie
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 + "=" + cvalue + ";" + expires + ";path=/";
}

// 获取cookie
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.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) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// 检查是否存在记住密码的cookie
function checkRememberMe() {
  var username = getCookie("username");
  var password = getCookie("password");

  if (username !== "" && password !== "") {
    // 填充用户名和密码
    document.getElementById("username").value = username;
    document.getElementById("password").value = password;
  }
}

// 登录按钮点击事件
function login() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var rememberMe = document.getElementById("rememberMe").checked;

  // 处理登录逻辑...

  if (rememberMe) {
    // 设置记住密码的cookie
    setCookie("username", username, 7);
    setCookie("password", password, 7);
  } else {
    // 清除记住密码的cookie
    setCookie("username", "", -1);
    setCookie("password", "", -1);
  }
}

// 在页面加载时检查是否存在记住密码的cookie
window.onload = function() {
  checkRememberMe();
};
```

上面的代码中,`setCookie`函数用于设置cookie,`getCookie`函数用于获取cookie,`checkRememberMe`函数用于检查是否存在记住密码的cookie并填充用户名和密码,`login`函数是一个示例的登录函数,具体的登录逻辑需要根据实际情况进行修改。

在HTML中,可以使用以下代码来调用上述的JavaScript函数:

```html
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<label><input type="checkbox" id="rememberMe"> Remember me</label>
<button οnclick="login()">Login</button>
```

以上示例代码演示了如何使用cookie实现记住密码的功能。当用户选择记住密码时,用户名和密码会被保存到cookie中,并在下次访问网站时自动填充。当用户取消记住密码时,cookie会被清除。根据实际情况而定                                                     

  • 13
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个基本的使用 cookie 记住密码的示例程序: ```python from flask import Flask, request, make_response app = Flask(__name__) @app.route('/') def index(): # 从 cookie 获取用户名和密码 username = request.cookies.get('username') password = request.cookies.get('password') if username and password: return f'Welcome back, {username}!' else: return 'Please log in.' @app.route('/login') def login(): # 获取用户名和密码 username = request.args.get('username') password = request.args.get('password') # 验证用户名和密码 if username == 'admin' and password == '123456': # 登录成功,设置 cookie resp = make_response(f'Welcome, {username}!') resp.set_cookie('username', username) resp.set_cookie('password', password) return resp else: return 'Invalid username or password.' if __name__ == '__main__': app.run() ``` 在这个示例程序,我们使用 Flask 框架来实现一个简单的登录页面。当用户访问首页时,程序会检查 cookie 是否保存了用户名和密码,如果有,则欢迎用户回来;否则,提示用户登录。 当用户点击登录按钮时,程序会获取用户名和密码,并进行验证。如果用户名和密码正确,则设置 cookie,并欢迎用户登录成功;否则,提示用户用户名或密码错误。 注意:在实际生产环境使用 cookie 记住密码可能存在安全风险。建议使用更加安全的方式,如使用 session 或使用 OAuth2 等授权协议。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值