php+cookie实现用户登录：实现阻挡层效果，即用户在未登录状态下会无法访问list.html页面（相似参考效果为商城中，用户在未登录的状态下，无法实现加入购物车功能）

效果图：

功能描述：用cookie实现在登录的情况下才能进入某页面（此时cookie只能在同一个文件夹下面调用，有域名限制和项目地址限制）

 执行流程描述：

            1 用户在login.html中输入登录账号和密码，通过action将数据传送到login.php文件中，即后台；

            2 后台操作

                 1 后台通过_GET方法获取到用户输入的账号和密码；

                 2 与数据库建立连接，查询数据库中是否有该账号

                 3 判断该用户是否有访问list.html页面的权限

                      1 如果有该账号，则跳转到list.html页面

                      2 如果没有该账号，则提示用户先登录，并自动跳转到登录页面

login.html

<form action="./login.php">
        账号：<input type="text" name="username">
        <br/>
        密码：<input type="password" name='pass1'>
        <br/>
        <button>登录</button>
    </form>

login.php

<?php
header("content-type:text/html;charset=utf-8");
//连接数据库
//shop2为数据库名
$link=mysqli_connect("localhost","root",'','shop2');

//获取传入的参数
//login.html中没有书写请求方式，就默认为get请求
$n=$_GET['username'];
$p=$_GET['pass1'];

//设置编码
mysqli_set_charset($link,"utf8");

//编写SQL语句
//查询：查询用户输入的用户名和命名和数据库中是否一致
$sql="select * from user3 where name='$n' and age=$p";
//执行SQL语句
$result=mysqli_query($link,$sql);
//判断当前结果集中是否有数据
//mysqli_fetch_row() 函数从结果集中取得一行，并作为枚举数组返回。
//一条条获取
if($row=mysqli_fetch_row($result)){
    //创建cookie，保存账号
    setcookie('name1',$n);
    //header() 函数向客户端发送原始的 HTTP 报头。（不太理解）
    header("location:./list.html");
}else{
    echo "
        <script>
            alert('登录失败');
            location.href='./login.html'
        </script>
    ";
}

?>

 list.html

<h1>欢迎<span></span>的到来！</h1>

    <script src="../cookie.js"></script>
    <script>
        //获取操作对象
        var span=document.querySelector("span")
        //获取cookie
        var name1=getCookie("name1")//value是一串ASCII码
        //判断当前是否是登录后进入的
        if(name1){
            //记得解码
            span.innerHTML=decodeURI(name1)
        }else{
            alert("非法进入，请登录")
            location.href="./login.html"
        }
    </script>

cookie函数的封装代码：

/*
方法类型：前端操作cookie
方法的功能描述：创建coookie、设置cookie、删除cookie

*/

//根据键名，获取指定的键值
function getCookie(key){
    //获取所有的cookie
    var cookies=document.cookie//cookies是字符串
    //使用分割的方式，把字符串转为数组
    var ar1=cookies.split("; ")//注意分号后面是有一个空格的；获得以一个键值对作为一个数组成员的数组
    //遍历分割好的数组元素
    for(var i=0;i<ar1.length;i++){
        //分割遍历出来的数组元素
        var ar2=ar1[i].split('=')
        //判断当前分割出来的键名是否等于传入的键名
        if(ar2[0]==key){
            return ar2[1]
        }
    }
}
//设置cookie
function setCookie(key,val,time1=0){
    /*
    key:键名
    val：键值
    time1:该cookie保存的秒数
    */
    
    //获取当前北京时间
    var dt1=new Date()
    //获取当前世界时间
    var time2=dt1-8*3600*1000+time1*1000
    //添加cookie
    document.cookie=`${key}=${val};expires=${new Date(time2)}`
}

//删除cookie
function delCookie(key){
    setCookie(key,'',-1)//键名不可重复，重复就会被覆盖，
}