JavaScript（简称js）中的Cookie是一种在客户端存储少量数据的技术，常用于实现用户登录状态的保持，例如“记住密码”功能。下面我们将详细讨论如何使用js实现这一功能。
我们需要了解HTML部分。在示例代码中，有一个包含用户名和密码输入框的表单，以及一个复选框供用户选择是否记住密码。当用户勾选“记住用户”时，我们的js函数将被调用，以便在用户下次访问时自动填充用户名。
```html
<form id="form22" name="form22" action="checklogin.action" method="post">
<!-- ... -->
<div class="username">
<label>用户名：</label>
<input type="text" name="username" id="userName" />
<span id="myuser"></span>
</div>
<div class="password">
<label>密 码：</label>
<input name="password" id="passWord" type="password" />
<span id="mypass"></span>
</div>
<div class="user_type">
<input type="checkbox" id="saveUserName" style="float: left; margin-top:3px;" />
<span> 记住用户</span>
</div>
<input type="button" value="" class="btn_login" id="btn_login" onclick="checkform();" />
</form>
```
接下来，我们分析JavaScript部分。这里有两个核心函数：`setCookie` 和 `getCookie`，它们分别用于设置和获取Cookie。
1. `setCookie` 函数接收两个参数，`name` 和 `value`，表示Cookie的名称和值。它会创建一个有效期为30天的Cookie。如果值为空或无效，函数将不做任何操作。否则，它会将Cookie的值进行转义（防止特殊字符导致问题）并设置到期时间为2038年1月17日。这是通过设置`expires`属性来实现的。
```javascript
function setCookie(name, value) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
if (value == "" || value == "null" || value == "null" || value == " ") {
} else {
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toUTCString();
}
}
```
2. `getCookie` 函数用于根据给定的`name`查找并返回Cookie的值。它首先将所有Cookie分割成键值对数组，然后遍历数组，如果找到匹配的键，则返回对应的值。如果未找到，返回`null`。
```javascript
function getCookie(sName) {
var aCookie = document.cookie.split("; ");
for (var i = 0; i < aCookie.length; i++) {
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0]) {
return aCrumb[1];
}
}
return null;
}
```
此外，还有两个辅助函数：
- `checkCookieExist` 检查指定的Cookie是否存在，如果存在则返回`true`，否则返回`false`。
- `deleteCookie` 删除指定的Cookie。它通过设置Cookie的过期时间为过去的时间来实现删除。
```javascript
function checkCookieExist(name) {
return getCookie(name) !== null;
}
function deleteCookie(name, path, domain) {
if (checkCookieExist(name)) {
var strCookie = name + "=; expires=Thu, 01-Jan-1970 00:00:01 GMT";
strCookie += (path) ? "; path=" + path : "";
strCookie += (domain) ? "; domain=" + domain : "";
document.cookie = strCookie;
}
}
```
在实际应用中，我们还需要监听复选框的变化，当用户勾选“记住用户”时，将用户名保存到Cookie，反之则删除。这可以通过添加事件监听器实现：
```javascript
document.getElementById('saveUserName').addEventListener('change', function() {
if (this.checked) {
setCookie('username', document.getElementById('userName').value);
} else {
deleteCookie('username');
}
});
```
这样，当用户再次访问网站时，我们可以在页面加载时检查是否有保存的用户名Cookie，如果有则自动填充到用户名输入框：
```javascript
window.onload = function() {
var username = getCookie('username');
if (username) {
document.getElementById('userName').value = unescape(username);
}
};
```
总结来说，js实现记住密码功能的关键在于利用Cookie来存储用户的用户名。当用户勾选“记住密码”时，将用户名保存到Cookie；当用户取消勾选时，删除对应的Cookie。在页面加载时，检查Cookie是否存在，并据此自动填充用户名。这个过程需要结合HTML表单、JavaScript事件处理和Cookie操作来完成。
