筑坐极_Cookie的详细用法

Cookie常用函数:

//为Cookie添加数据的函数,需提供cName(key),cVal(value),expiresDays(数据保存天数)
function setCookie(cName,cVal,expiresDays) {
    if (cName && cVal && expiresDays){
        cName = cName.replace(/\s+/g,'');
        cVal = cVal.trim();
        if(cName && cVal){
            let d = new Date();
            d.setTime(d.getTime()+expiresDays*24*60*60*1000);
            let gmtTimerStr = d.toUTCString();
            document.cookie = cName + "=" + cVal +";expires=" + gmtTimerStr + "path=/";
        }
    }
}
//根据cName(key)获取Cookie中已有数据的函数;
function getCookie(cName) {
    cName = cName + "=";
    let cookiesArr = document.cookie.split( ";" );
    for (let i = 0; i < cookiesArr.length ; i++) {
        let item = cookiesArr[i].trim();
        if (item.startsWith(cName)) {
            return item.substring(cName.length);
        }
    }
}
//根据cName(key)清除Cookie中已有数据的函数;
function removeCookie(cName) {
    cName = cName.trim();
    document.cookie = cName + "=*;expires=" + (new Date().toUTCString()) + "path=/";
}

Cookie常用函数用法:

///把数据存入cookie,需输入key,value,储存天数这3个参数;
    setCookie("aaaaaa","bbbbbb",2);

    //根据key值从cookie中获取对应的value;
    let a = getCookie("aaaaaa");
    // a = JSON.parse(a);
    console.log(a);

    //根据key值移除cookie中的该条数据;
    removeCookie("aaaaaa");

利用Cookie的案例:

登录页面:
1.1web端:

<head>
    <meta charset="UTF-8">
    <!--禁止缩放--!>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0 ">
    <title>登录页</title>
    <!--图标--!>
    <link rel="shortcut icon" href="../../Js/imgs/bitbug_favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
    <script src="../../bootstrap/jquery.min.js"></script>
    <script src="../../bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../Js/cookies.js"></script>
</head>
<body>
<!--头部导航栏--!>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
                       data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>
<!--主题页面部分--!>
<div class="container-xxl" >
    <div class="row">
        <div class="d-none d-sm-block col-sm-2 col-md-2 col-lg-4"></div>
        <div class="d-none d-lg-block col-lg-4"></div>
        <div class="col-12 col-sm-10 col-md-8 col-lg-4 p-5">
            <h3 class="title">请登录:</h3>
            <form action="#">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="username" aria-label="Sizing example input"
                           aria-describedby="inputGroup-sizing-default" placeholder="请输入用户名"
                           onblur="unblur(this.value)" value="乌龙奶茶">
                </div>
                <div class="input-group mb-3">
                    <input type="password" class="form-control" id="password" aria-label="Sizing example input"
                           aria-describedby="inputGroup-sizing-default" placeholder="请输入密码"
                           onblur="pwblur(this.value)" value="wulongnaicha">
                </div>
                <div class="mb-3 hide errMsg" >
                    <p id="error-msg" style="color: red"></p>
                </div>
                <div class="mb-3">
                <button type="button" class="btn btn-danger" style="width: 100%" onclick="submitForm()">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

1.2 CSS部分:

<style type="text/css">
    .form-control{
        margin: 10px;
    }
    .title{
        margin-top: 10px;
        text-align: center;
        padding: 15px;
        color: rgba(225,0,80,0.7);
    }
</style>

1.3 Js部分:

<script type="text/javascript">
    //用户名及密码输入框,焦点离开后会提示是否为空
    function unblur(v) {
        if(!v){
            $(".errMsg").show();
            $("#error-msg").text("用户名不能为空!");
        }
        else {
            $(".errMsg").hide();
        }
    }
    function pwblur(v) {
        if (!v) {
            $(".errMsg").show();
            $("#error-msg").text("密码不能为空!");
        }
        else {
            $(".errMsg").hide();
        }
    }
    //点击登录按钮后执行登录函数;
    function submitForm() {
        let un = $("#username").val();
        let pw = $("#password").val();
        //获取用户名及密码后需再次判断是否为空值;
        if(!un||!pw){
            $(".errMsg").show();
            $("#error-msg").text("用户名与密码必填");
            return;
        }
        let url = "http://106.14.192.118/admin_log";
        //使用阿贾克斯POST类型
        $.ajax({
            url:url,
            type:"POST",
            dataType:"json",
            data:{
                "username":un,
                "password":pw
            },
            success:function (data) {
                //连接接口成功后判断获取到的status值;
                if(data.status){
                    let info = data.data;
                    delete info.password;
                    //删除掉敏感信息后将数据转为字符串,放入Cookie中,并进入主页
                    info = JSON.stringify(info);
                    setCookie("USER_INFO",info,3);
                    window.location.href = "lsl-pra-0624-js-4.html";
                }
                else {
                    $(".errMsg").show();
                    $("#error-msg").text(data.msg);
                }
            },
            error:function (err) {
                //连接端口失败,根据status返回的错误类型,显示不同的错误信息
                $(".errMsg").show();
                switch (err.status) {
                    //端口路径出现问题
                    case 404:
                        $("#error-msg").text("程序出现问题了，正在加急抢修");
                        break;
                    //服务器出现问题
                    case 500:
                        $("#error-msg").text("用户名与密码必填");
                        break;
                    //用户网络出现问题
                    case 0:
                        $("#error-msg").text("程序出现问题了，正在加急抢修");
                        break;
                    //未知错误    
                    default:
                        $("#error-msg").text("程序出现未知问题，正在加急抢修");
                        break;
                }
            }
        })
    }
</script>

2.主页部分:

2.1主页web端:

表头导航栏及图标等部分和登录界面相同,只展示页面主题部分

<h1 class="text-center title">
    <!--此处默认为无账号状态,因此是返回登录界面的链接-->
    <a href="lsl-pra-0624-js-3.html"><--请先登录!--></a>
</h1>

2.2Js部分:

<script type="text/javascript">
    $(function(){
        //从Cookie获取账号信息;
        let info = getCookie("USER_INFO");
        if(info){
        //将账号信息转为对象类型,并从中找到username属性,并用html()函数将h1标签内容替换为登录后内容;
            info = JSON.parse(info);
            let userName = info.username;
            $(".title").html("<p style='color: #6f42c1'>欢迎,"+userName+"!</p>");
        }
    })
</script>

Cookie的详细用法

梁松*

Cookie,Web

Cookie常用函数的示例以及练习案例展示

2021.06.25

835人

梁松*

天津市河东区

Hot:10041

梁松*

当前作品暂无评分

还未获得评语哦~