JS读取cookies信息(记录用户名)-前端开发

关于 JS读取cookies信息(记录用户名) 的攻略，以下是详细步骤：

关于 "JS读取cookies信息(记录用户名)" 的攻略，以下是详细步骤：

1.设置cookie

在用户登陆成功后，我们可以将用户的信息（例如用户名）作为cookie存储到客户端浏览器，下次访问时即可从cookie中读取该信息，自动填充到登录表单。

以下是一个设置cookie的示例代码：

// 设置cookie函数
function setCookie(name, value, expireDays) {
  // 设置cookie有效期
  var expireDate = new Date();
  expireDate.setTime(expireDate.getTime() + (expireDays * 24 * 60 * 60 * 1000));

  // 组装cookie字符串
  var cookieStr = name + "=" + encodeURI(value) + "; expires=" + expireDate.toUTCString() + "; path=/";

  // 设置cookie
  document.cookie = cookieStr;
}

// 登陆成功后设置用户名cookie
setCookie("username", "张三", 7);

以上代码使用document.cookie设置cookie，其中参数name指cookie的key，value指该key对应的value，expireDays指cookie的有效期（单位为天）。

2.读取cookie

用户再次访问网站时，我们可以读取cookie中存储的用户名信息，自动填充到登录表单中。

以下是一个读取cookie的示例代码：

// 读取cookie函数
function getCookie(name) {
  var cookieArr = document.cookie.split("; ");

  // 遍历cookie数组，查找指定的cookie
  for (var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");

    // 存在指定的cookie，返回其value
    if (name == cookiePair[0]) {
      return decodeURI(cookiePair[1]);
    }
  }

  // 未找到指定的cookie
  return null;
}

// 自动填充登录表单
var username = getCookie("username");
if (username) {
  document.getElementById("login-name").value = username;
}

以上代码使用 document.cookie 读取cookie，然后遍历该cookie数组，查找与指定key相匹配的cookie，定位到该cookie时返回其value。未找到该cookie时返回null。

3.使用示例

以下是一个简单的登录示例，用户在登录表单中输入用户名、密码，然后提交表单。如果勾选了“记住用户名”选项，则将用户名设置为cookie；如果未勾选该选项，则清空cookie。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登录示例</title>
</head>
<body>
  <form id="login-form" action="your-server-url" method="POST">
    <div>
      <label for="login-name">用户名：</label>
      <input type="text" id="login-name" name="username">
    </div>
    <div>
      <label for="login-password">密码：</label>
      <input type="password" id="login-password" name="password">
    </div>
    <div>
      <input type="checkbox" id="remember-name" name="remember-name">
      <label for="remember-name">记住用户名</label>
    </div>
    <div>
      <button type="submit">登录</button>
    </div>
  </form>

  <script type="text/javascript">
    // 读取之前存储的cookie
    var username = getCookie("username");
    if (username) {
      document.getElementById("login-name").value = username;
      document.getElementById("remember-name").checked = true;
    }

    // 监听登录表单的提交事件
    document.getElementById("login-form").addEventListener("submit", function(event) {
      // 判断是否勾选了“记住用户名”选项
      if (document.getElementById("remember-name").checked) {
        // 存储用户名为cookie
        setCookie("username", document.getElementById("login-name").value, 7);
      } else {
        // 清空cookie
        setCookie("username", "", -1);
      }
    });
  </script>
</body>
</html>

以上示例代码通过监听表单的提交事件，判断是否勾选了“记住用户名”选项，然后根据勾选状态设置、清空cookie。同时，在页面加载时读取cookie中存储的用户名信息，并自动填充到表单中。

希望对你有所帮助。