项目描述
上传时间
浏览人数
首先调用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首页登录、注册
再添加一个隐藏的用户名
<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("没人登录~~~"); } })
登录成功后显示的用户名