JS原生Cookie实现记住密码案例

前端小凯

已于 2022-10-13 11:14:12 修改

阅读量137

点赞数 1

文章标签： javascript 前端 html

于 2022-10-13 11:14:10 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/127297669

版权

使用自己封装好的cookie

myCookie.js:

// 设置Cookie
function setCookie(key, value, time) {
  var now = new Date();
  now.setDate(now.getDate() + time);
  document.cookie = `${key}=${value};expires=${now}`;
}

// 获取Cookie
function getCookie(key) {
  var array = document.cookie;
  var newArray1 = array.split("; ");
  for (var item of newArray1) {
    var newArray2 = item.split("=");
    if (newArray2[0] == key) {
      return newArray2[1];
    }
  }
}

// 删除Cookie
function removeCookie(key) {
  this.setCookie(key, "", -1);
}

// 清空Cookie
function clearCookie() {
  var array = document.cookie;
  var newArray1 = array.split("; ");
  for (var item of newArray1) {
    var newArray2 = item.split("=");
    // this.setCookie(newArray2[0], "", -1);
    this.removeCookie(newArray2[0]);
  }
}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cookie记住密码</title>
  </head>
  <body>
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" />
    <br />
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" />
    <br />
    <label for="checkbox">记住密码:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
    <br />
    <button>登录</button>
    <script src="./myCook.js"></script>
    <script>
      var username = document.getElementById("username");
      var password = document.getElementById("password");
      var checkbox = document.getElementById("checkbox");
      var btn = document.querySelector("button");
      if (getCookie("checkbox")) {
        username.value = getCookie("username");
        password.value = getCookie("password");
        checkbox.checked = getCookie("checkbox");
      }
      btn.onclick = function () {
        setCookie("username", username.value);
        setCookie("password", password.value);
        setCookie("checkbox", checkbox.checked);
        if (checkbox.checked == false) {
          removeCookie("username");
          removeCookie("password");
          removeCookie("checkbox");
        }
      };
    </script>
  </body>
</html>