jQuery基础教程(二十)

jQuery操作cookie需要使用 jquery.cookie.js插件。

1.引入jquery.cookie.js

注意：引入的次序必须是先引入jquery.js再引入jquery.cookie.js。

<!---注意：一定先引入jQuery库，再引入jQueryCookie的库，次序不能颠倒--->
<!--引入jQuery类库-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!--引入jQuery-Cookie插件CDN-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

2.$.cookie操作cookie

操作	实例
添加	$.cookie('cookieName', 'cookieValue', { expires: 7, path: '/',domain: 'localhost' });
读取	$.cookie('cookieName');
删除	$.cookie('cookieName', '', { expires: -1, path: '/',domain: 'localhost' });

3.实例

使用jQuery.cookie实现记住登录状态功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!---注意：一定先引入jQuery库，再引入jQueryCookie的库，次序不能颠倒--->
    <!--引入jQuery类库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--引入jQuery-Cookie插件CDN-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <style>

        h1 {
            text-align: center;
        }

        #box {
            margin: 0px auto;
            width: 420px;
            height: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
        }

        .row {
            display: flex;
            margin: 5px;
            width: 100%;
            justify-content: space-around;
        }

        .label {
            width: 20%;
        }

        .controller {
            width: 40%;
        }

        .msg {
            width: 40%;
        }

        #username_msg, #password_msg {
            color: #F00;
        }

    </style>
</head>
<body>
<h1>用户登录</h1>
<hr>

<div id="box">
    <form>
        <div class="row">
            <div class="label">用户名：</div>
            <div class="controller"><input type="text" size="18" name="username" autocomplete="off" id="username"
                                           value=""/></div>
            <div class="msg"><span id="username_msg"></span></div>
        </div>
        <div class="row">
            <div class="label">密码：</div>
            <div class="controller"><input type="password" size="18" name="password" autocomplete="off" id="password"
                                           value=""/></div>
            <div class="msg"><span id="password_msg"></span></div>
        </div>
        <div class="row">
            <div class="label"></div>
            <div class="controller"><input type="checkbox" id="rememberme" checked/>记住我</div>
            <div class="msg"></div>
        </div>
        <div class="row">
            <div class="label">&nbsp;</div>
            <div class="controller" style="text-align: center"><input style="width: 80px" type="button" id="btn"
                                                                      value="登录" onclick="doLogin()"/></div>
            <div class="msg"><span></span></div>
        </div>
    </form>
</div>

<script>

    let loginUser = {
        'username': '',
        'password': ''
    };

    //从cookie中去初始化用户名和密码
    function initUsernameAndPassword() {
        let cookie_username = $.cookie('loginUsername.www.simoniu.com');
        let cookie_password = $.cookie('loginPassword.www.simoniu.com');
        if (cookie_username !== null && cookie_username !== undefined) {
            $("#username").val(cookie_username);
        }
        if (cookie_password !== null && cookie_password !== undefined) {
            $("#password").val(cookie_password);
        }
    }

    //记住登录状态
    function rememberLoginStatus(username, password) {
        $.cookie('loginUsername.www.simoniu.com', username, {expires: 365, path: '/', domain: 'localhost'});
        $.cookie('loginPassword.www.simoniu.com', password, {expires: 365, path: '/', domain: 'localhost'});
    }

    //清除登录状态
    function removeLoginStatus() {
        // -1 表示立刻过期，就是变向删除...
        $.cookie('loginUsername.www.simoniu.com', '', {expires: -1, path: '/', domain: 'localhost'});
        $.cookie('loginPassword.www.simoniu.com', '', {expires: -1, path: '/', domain: 'localhost'});
    }


    //登录表单的验证
    function loginFormValidate() {
        //规定用户名不能为空，密码不能少于6位。
        let username = $("#username").val();
        let password = $("#password").val();
        if (username.length === 0) {
            //alert('用户名不能为空')
            $("#username_msg").text('用户名不能为空！');
            return false;
        }
        if (password.length < 6) {
            $("#password_msg").text('密码不能少于6位!');
            return false;
        }
        return true;
    }

    function doLogin() {
        $("#username_msg").text('');
        $("#password_msg").text('');
        //无论什么账号，都可以登录成功。
        if (loginFormValidate()) {
            //console.log('执行用户登录')
            let username = $("#username").val();
            let password = $("#password").val();
            loginUser.username = username;
            loginUser.password = password;

            //判断用户是否选中了记住我
            if ($("#rememberme").prop("checked")) {
                console.log('用户选择了记住我....')
                rememberLoginStatus(loginUser.username, loginUser.password);
            } else {
                console.log('用户选择了忘记我....')
                removeLoginStatus();
            }
            //注意：只能存字符串，不能存对象。把json对象转换为字符串。
            localStorage.setItem('loginSuccessUser', JSON.stringify(loginUser));
            window.location.href = 'login_success.html';
        }

    }
    window.onload = initUsernameAndPassword();

</script>
</body>
</html>

login_success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jQuery类库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--引入jQuery-Cookie插件CDN-->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <style>
        h1 {
            text-align: center;
        }
        #box{
            margin: 0px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 280px;
            padding: 20px;
        }
    </style>
</head>
<body>
<h1>登录成功</h1>
<hr>

<div id="box">
    欢迎您：<span style="color:red;" id="loginSuccessUsername"></span>
</div>

<script>

    let loginUser = {
        "username": "",
        "password": ""
    };

    $("#loginSuccessUsername").text(loginUser.username);

    if(window.localStorage.getItem("loginSuccessUser")!=null){
        //字符串转换json对象
        loginUser = JSON.parse(localStorage.getItem("loginSuccessUser"));
        $("#loginSuccessUsername").text(loginUser.username);
    }

    /*尝试获取一下登录成功的用户名和密码*/
    let cookie_username = $.cookie('loginUsername.www.simoniu.com');
    let cookie_password = $.cookie('loginPassword.www.simoniu.com');
    console.log("cookie里保存的用户名是："+cookie_username);
    console.log("cookie里保存的密码是："+cookie_password);

</script>
</body>
</html>

运行效果：

注意：

最新版的chrome浏览器已经无法手动设置Cookie。需要在谷歌浏览器中搜索chrome://flags/，搜索Partitioned cookies ，改为Enabled。