js利用cookie设置登录的过期时间

2023-12-30 21:48:30


<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <link rel="stylesheet" href="../code/css/bootstrap.min.css">
? ? <style>
? ? ? ? .register{
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? margin: 100px auto;
? ? ? ? }
? ? ? ? h3{
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="register container">
? ? ? ? <h3>欢迎来到登录页面</h3>
? ? ? ? <form autocomplete="off">
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? <label for="exampleInputEmail1">用户名：</label>
? ? ? ? ? ? ? <input type="text" class="form-control username" id="exampleInputEmail1" placeholder="请输入用户名">
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? <label for="exampleInputPassword1">密码：</label>
? ? ? ? ? ? ? <input type="password" class="form-control password" id="exampleInputPassword1" placeholder="请输入密码">
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? <input type="checkbox" class="check"> 是否记住密码
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? </div>
? ? ? ? ? ? <button type="button" class="btn btn-default">登录</button>
? ? ? ? </form>
? ? </div>
? ? <script>
? ? ? ?username=document.querySelector('.username')
?? ? ? password=document.querySelector('.password')
?? ? ? check=document.querySelector('.check')
?? ? ? btn=document.querySelector('.btn')
?? ? ? function setCookie(name,value,time){
?? ??? ? ? if(time){
?? ??? ??? ? ? var d=new Date()
?? ??? ??? ? ? d.setDate(d.getDate()+time)
?? ??? ??? ? ? d=d.toUTCString()
?? ??? ??? ? ? document.cookie=`${name}=${value};path=/;expires=${d}`
?? ??? ??? ? ? return
?? ??? ? ? }
?? ??? ? ? ?document.cookie=`${name}=${value};path=/`
?? ? ? }
?? ? ? function getCookie(name) {
?? ? ? ? ? let arr = document.cookie.split('; ')
?? ? ? ? ? const obj = {}
?? ? ? ? ? arr.forEach(item => {
?? ? ? ? ? ? ? let newArr = item.split('=')
?? ? ? ? ? ? ? obj[newArr[0]] = newArr[1]
?? ? ? ? ? })
?? ? ? ? ? return obj[name]
?? ? ? }
?? ? ? function init(){
?? ??? ? ? if(getCookie('username')==undefined||getCookie('password')==undefined){
?? ??? ??? ? ? username.value=''
?? ??? ??? ? ? password.value=''
?? ??? ??? ? ? check.checked=false
?? ??? ? ? }
?? ??? ? ? else{
?? ??? ??? ? ? getCookie('username')
?? ??? ??? ? ? getCookie('password')
?? ??? ??? ? ? getCookie('type')
?? ??? ? ? }
?? ? ? }
?? ? ? init()
?? ? ? btn.οnclick=()=>{
?? ??? ? ? if( username.value==''|| password.value==''){
?? ??? ??? ? ? alert('不能有空的内容！')
?? ??? ??? ? ? return
?? ??? ? ? }
?? ??? ? ? var type=check.checked
?? ??? ? ? if(type){
?? ??? ??? ? ? setCookie('username', username.value, 7)
?? ??? ??? ? ? setCookie('password', password.value, 7)
?? ??? ??? ? ? setCookie('type', type, 7)
?? ??? ??? ? ? ? location.href = './10-index.html'
?? ??? ??? ? ? return
?? ??? ? ? }
?? ??? ? ? setCookie('username', username.value)
?? ??? ? ? ? location.href = './10-index.html'
?? ? ? }
? ? </script>
</body>
</html>

文章来源:https://blog.csdn.net/qq_52840130/article/details/135278835
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。