使用jquery的cookie实现登录页记住用户名和密码的方法

使用jQuery的cookie插件可以方便地实现记住用户名和密码功能。接下来，我将为您提供完整的攻略，以实现此功能。

1. 在HTML中添加相关代码

首先，在登录页面的表单中添加两个复选框，一个用于记住用户名，一个用于记住密码。这些复选框应该具有唯一的ID，以便在jQuery中引用它们。

<label for="rememberUsername">
    <input id="rememberUsername" type="checkbox" name="rememberUsername" value="1">记住用户名
</label>
<label for="rememberPassword">
    <input id="rememberPassword" type="checkbox" name="rememberPassword" value="1">记住密码
</label>

1. 在jQuery代码中添加cookie功能

接下来使用jQuery的cookie插件，实现在选中“记住用户名”和“记住密码”复选框时，存储用户名和密码。在页面加载时，检查是否已经保存了用户名和密码，如果已保存，则自动填充表格。

$(document).ready(function() {
    // 设置cookie
    function setCookie(name, value, expires) {
        var cookie = name + "=" + encodeURIComponent(value);
        if (expires) {
            cookie += "; expires=" + expires.toGMTString();
        }
        document.cookie = cookie;
    }

    // 获取cookie
    function getCookie(name) {
        var matches = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
        if (matches) {
            return decodeURIComponent(matches[2]);
        }
    }

    // 删除cookie
    function deleteCookie(name) {
        document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }

    // 检查是否保存了用户名和密码
    var username = getCookie("username");
    var password = getCookie("password");
    if (username && password) {
        $("#username").val(username);
        $("#password").val(password);
        $("#rememberUsername").prop("checked", true);
        $("#rememberPassword").prop("checked", true);
    }

    // 监听“登录”按钮点击事件
    $("#login").click(function() {
        // 获取用户名和密码
        var username = $("#username").val();
        var password = $("#password").val();

        // 判断是否保存用户名和密码
        if ($("#rememberUsername").is(":checked")) {
            setCookie("username", username, new Date(new Date().getTime() + 1000 * 60 * 60 * 24));
        } else {
            deleteCookie("username");
        }
        if ($("#rememberPassword").is(":checked")) {
            setCookie("password", password, new Date(new Date().getTime() + 1000 * 60 * 60 * 24));
        } else {
            deleteCookie("password");
        }
    });
});

在这个例子中，setCookie()函数用于保存cookie，getCookie()函数用于读取cookie，deleteCookie()函数用于删除cookie。$().is()和$().prop()方法用于获取或设置表单元素的状态。

示例1：登录时保存用户名和密码

在这个示例中，当用户打开登录页面并输入用户名和密码后，选中“记住用户名”和“记住密码”复选框，点击“登录”按钮时，页面将保存用户名和密码。之后，用户每次打开登录页面时，如果之前保存了用户名和密码，它们将显示在登录表单中，用户可以直接点击“登录”按钮进行登录。

示例2：自动填充已保存的用户名和密码

在这个示例中，当用户访问您的网站时，网站自动检查之前是否已保存了用户名和密码。如果已经保存过，它们将自动填充到表单中，用户只需按下“登录”按钮即可登录。这个示例不需要用户手动勾选“记住用户名”和“记住密码”复选框，在用户访问网站时即可自动恢复登录状态。

以上是使用jQuery的cookie实现记住用户名和密码的方法，如果您有任何问题，请随时联系我！