筑坐极_cookie的详细用法

cookie常用的函数

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 gmtTimeStr = d.toUTCString();
            document.cookie = cName + "=" + cVal + "; expires=" + gmtTimeStr + "; path=/";
        }
    }
}

function getCookie(cName) {
    cName += "=";                  //split分隔
    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); //取的key相对应的值,裁出来
        }
    }
    return "";//没成立为空
}

function removeCookie(cName) { //注销账号时
    cName = cName.trim();
    if (cName) {
        document.cookie = cName + "=*; expires=" + (new Date().toUTCString()) + "; path=/";
    }
}

web前端

<head>
    <meta charset="UTF-8">
    <!--防止缩放,手机横,竖放都不影响变化-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0 ">
    <title>登录页</title>
    <!--图标icon-->
    <link  rel="shortcut icon" href="../img/1.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/myCookies.js"></script>
</head>
<body>
<!--头部导航-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">头条新闻</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="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">娱乐</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">
                        下载游戏
                    </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">你的关注</a>
                </li>
            </ul>
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="你的喜欢" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">查找</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-xs-12 col-sm-8 col-md-8  col-lg-4 p-5"> <!--p-5内边距-->
            <h2 class="mb-5 mt-5 text-center">密码登录</h2>
           <from action="#">

               <div class="mb-3">                                            <!--onblur=函数/元素失去焦点.value/参数-->
                   <input type="text" class="form-control" placeholder="账号" id="un" onblur="unBlur(this.value)">
               </div>

               <div class="mb-3">
                   <input type="password" class="form-control"  placeholder="密码" id="pw" onblur="pwBlur(this.value)">
               </div>

               <div class="mb-3 hide error-block"> <!--block块 hide一上来是隐藏的，要if把它显示出来-->
                   <p class="error-msg" style="color: red;"></p>
               </div>

               <div class="mb-3 text-center">
                   <button type="button" class="btn btn-success "style="width: 100%" onclick="submitForm()">登录</button>
               </div>

           </from>
        </div>

    </div>

</div>

</body>

js部分

<script>  //$找元素 没有是创建函数

    function unBlur(v) { //判断v是否为空
        //console.log(v);
          if (!v){
              $(".error-block").show(); //寻找元素
              $(".error-msg").text("用户名不可以为空~");//id要用#
          }else{
              $(".error-block").hide();
          }
    }

    function pwBlur(v) {
        //console.log(v);
        if (!v){
            $(".error-block").show();
            $(".error-msg").text("密码不可以为空~");//id要用#
        }else{
            $(".error-block").hide();
        }

    }


    function submitForm  () {
        let  un = $("#un").val();
        let pw = $("#pw").val();
        //需要判断一下
        if(!un || !pw){
            $(".error-block").show();
            $(".error-msg").text("都是必填项~");
            return;//空值，把函数终止
        }
        //带着un，pw去访问这个接口
        let url = "http://106.14.192.118/admin_log";
        $.ajax({
            url:url,
            type:"POST",
            dataType:"json",//期待的返回值类型
            data:{
                username:un,
                password:pw
            },
            //若数据获取成功，则将数据展示在页面
            success:function(data){ //访问接口成功
             // console.log("成功！");
               console.log(data);
                console.log(data.msg);
              //成功的话也要判断一下状态
                if(data.status){ //如果正确跳转到首页



                    // 保留用户信息
                   window.location.href="demo02.html";
                                   }
                else{
                    $(".error-block").show();
                    $(".error-msg").text(data.msg);//id要用#
                }
            }



            ,error:function(err) { //访问接口失败
                    // err.status;   404 没找到
                    // err.status;   500 后台报错
                    // err.status;   0 后台报错


                    //console.log(Error);
                    //  console.log("err");
                    switch (err.status) {  //可以去求某个变量的值  switch开关
                        case 404: //break打破
                            $("#error-msg").text("程序发生了错误,程序猿正在积极抢救中~");
                            break;//当值是404时可以执行一段代码
                        case 500:
                            $("#error-msg").text("程序发生了错误,程序猿正在积极抢救中~");
                            break;
                        case 0:
                             $("#error-msg").text("请检查您的网络连接状况~");
                             break;
                        default:
                            $("#error-msg").text("程序发生了未知错误,请联系站点管理员~");
                            //默认
                          break;
                    }

                }
        })

    }


</script>

cookie的详细用法

苏林*

cookie的详细用法

cookie的详细用法

2021.06.28

718人

苏林*

天津市大港区

Hot:14178

苏林*

当前作品暂无评分

还未获得评语哦~