javascript-cookie

董立华

2021.12.22

67人浏览

关于cookie操作-登录

首先调用cookies.js 

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 += "=";
  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);
    }
  }
  return "";
}

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

html首页登录、注册

javascript-cookie

再添加一个隐藏的用户名

<nav class="b-topBar__nav">
    <ul>
        <li><a href="#" style="text-decoration: none;" class="cart">购物车</a></li>
        <li class="no-login"><a class="register" data-bs-toggle="modal" data-bs-target="#myModal1"
               style="text-decoration: none;">注册</a></li>
        <li class="no-login"><a class="sign-in" data-bs-toggle="modal" data-bs-target="#myModal"
               style="text-decoration: none;" >登录</a></li>
        <li>
            <div class="is-login">
                欢迎您,<span></span>
            </div>
        </li>
    </ul>
</nav>

css部分

.is-login{
    display:none;
}
.is-login >img {
    width:20px;
}
.is-login>span {
    color: #f76d2b;
    font-weight: 600;
}

拿到用户登录信息保存到缓存cookies中

登录js部分

function login() {
    let em = $("#email").val();
    let pw = $("#password").val();
    if(em && pw){
        let url = "http://47.97.212.173/user/login";
        let params = {
            email:em,
            password:pw,
        };
        $.ajax({
            url:url,
            type:'POST',
            data:params,
            dataType:'json',
            success:function (result) {
                console.log(result);
                if(result.state == 1){
                    // console.log(result.data);
                    let dataStr = JSON.stringify(result.data);//对象转换为字符串
                    // console.log(dataStr);

                    //放入缓存
                    setCookie("USER_LOGIN_CACHE",dataStr,2);

                    //重新跳转首页
                    window.location.href = "index.html";


                }else{
                    alert("登录失败" + result.msg);
                }
            },
            error:function (err) {
                alert("发生未知错误,请联系管理员");
            }
        })
    }else{
        alert("请正确填写登陆名或密码");
    }
}

注册js部分

function sign() {
    let nc = $("#nickname").val();
    let ea = $("#email-1").val();
    let ps = $("#password-1").val();
    if(nc && ea && ps){
        let url = "http://47.97.212.173/user/sign";
        let parmas ={
            nickname:nc,
            email:ea,
            password:ps,
        };
        $.ajax({
            url:url,
            type:'POST',
            data:parmas,
            dataType: 'json',
            success:function (result) {
                console.log(result);
                if(result.state == 1){
                    alert("注册成功");
                }else{
                    alert("注册失败"+ result.msg);
                }
            },
            error:function (err) {
                alert("发生未知错误,请联系管理员");
            }
        })
    }else{
        alert("请完整填写注册信息");
    }
}

用户登录后,登录和注册隐藏,只显示用户名

$(function () {
    let ucl = getCookie("USER_LOGIN_CACHE");

        if (ucl) {
            console.log("当前登录人:");
            //console.log(ucl);
            ucl = JSON.parse(ucl);//字符串转为对象
            //console.log("字符串转为对象");
            //console.log(ucl);
            
            $(".is-login>span").text(ucl.nickname);
            $(".is-login").show();
            $(".no-login").hide();
        } else {
            console.log("没人登录~~~");
        }

})

登录成功后显示的用户名


javascript-cookie

javascript-cookie


javascript-cookie

老师评分: 当前作品暂无评分

老师评语: 还未获得评语哦~

董立华    67 天津市武清县 设计师杨冰是女孩 1993.08.15
京ICP备17020986号-5
筑坐极2022版