筑坐极_JavaScript：Cookie操作-登录

通过JS代码，实现前端页面抓取登录的账号显示在页面上。

新建一个index.html，和一个登录的页面login.html，login页面写好登录窗口以及接口

两个页面引入JS代码以及Cookie代码

<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/js/Cookies.js"></script>

Cookie代码如下：

<script type="text/javascript">
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=/";
  }
}
</script>

登录页面代码：

<body>
<h3>用户登录</h3>
<ul>
  <li>

    <input type="text" id="username" placeholder="请输入用户名" value="1304@qq.com">
  </li>
  <li>
    <!--<label for="password">密&nbsp;&nbsp;&nbsp;码：</label>-->
    <input type="password" id="password" placeholder="请输入密码" value="123456">
  </li>
  <li style="">
    <p style="margin-left: 177px; cursor: pointer">忘记密码？</p>
  </li>
</ul>

<div class="btn-wrap">
  <a href="#" class="btn-buy" onclick="login()">登录</a>
</div>
</body>

实现登录JS代码：

<script type="text/javascript">
function login() {
  let nm = $('#username').val();
  let pw =$('#password').val();
  if (nm && pw){
    let url = "http://47.97.212.173/user/login";
    let params = {
      email: nm,
      password : pw,
    }
    $.ajax({
      url:url,
      type:'POST',
      data:params,
      dataType:'json',
      success:function (result) {
        if(result.state===1){
          console.log(result);
            
          let infoStr = JSON.stringify(result.data);//读取登录的后台信息
          setCookie('USER_LOGON_CACHE',infoStr,1);  //命名登录的账号为USER_LOGON_CACHE
            
          
          window.location.href='index.html';//登录成功后跳转到首页index.html
        }else {
          alert(result.msg)//登录错误返回信息
        }
      },
      error: function (err) {
        alert('发生未知错误，请检查网络');//登录不了返回信息
      }

    })
  }
}
</script>

登录成功后，直接跳转到index.html

index.html写两个div，class命名分别为is-login和no-login，当未登录时，用户信息隐藏

<body>
<div class="is-login"></div>  /*用户信息*/
<div class="no-login">登录</div>
</body>

通过Cookie提取账号信息，返回给页面，登录后，登录div隐藏

<script type="text/javascript">
$(function () {

  let ulc = getCookie('USER_LOGON_CACHE');
  if(ulc){
    console.log('当前登录人：');//打印当前登录人的昵称
    console.log(ulc);
    ulc = JSON.parse(ulc);
    $('.is-login').text(ulc.nickname+',你好！');
    $('.no-login').hide();
    $('.is-login').show();
  }
})
</script>

成功后显示打印信息

JavaScript：Cookie操作-登录

JavaScript：Cookie操作-登录

莫梦*

Javascript，HTML，CSS，Cookie

通过Javascript实现通过Cookie操作登录页面，返回后台账号数据。

2021.12.22

542人

莫梦*

广西壮族自治区贺州地区钟山县

Hot:1056

莫梦*

当前作品暂无评分

还未获得评语哦~