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

简介: 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会被清除。根据实际情况而定                              

相关文章
|
3月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
506 4
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
58 1
|
2月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
87 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript Cookie
JavaScript Cookie
18 0
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
164 1
前端JS正则校验密码之3种实现方式
|
4月前
|
存储
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
【Azure APIM】APIM 策略语句如何来设置多个Cookie值让浏览器保存
|
4月前
|
Java 应用服务中间件 nginx
【Azure 环境】Azure应用程序网关设置set_Cookie=key=value; SameSite=Strict; HTTPOnly,AzureAD登录使用cookie时使用不了的案例记录
【Azure 环境】Azure应用程序网关设置set_Cookie=key=value; SameSite=Strict; HTTPOnly,AzureAD登录使用cookie时使用不了的案例记录
|
4月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
76 0