前端 操作cookie的方法

                + 前端操作cookie的方法

                + 增删改查四个操作

            设置cookie

                + 不带过期时间的语法： document.cookie = "key=value"

                    == 一次设置一条，是不带有过期时间的

                    == 如果想设置过期时间，那么需要一些修饰信息

                + 带过期时间的语法： document.cookie = "key=value;expires=时间对象"

                    == 不管你给他一个什么时间点的时间对象

                    == cookie都会当作世界标准时间来使用了

                    == 因为我们的时间是中国标准时间

                    == 所以我们设置的时间对象要提前8个小时

            修改cookie

                + 和设置cookie是一摸一样的

                + 只不过重新设置一个已经存在的cookie就可以了


            删除cookie

                + 删除cookie就是重新设置一下这个cookie

                + 把过期时间设置成当前时间之前就可以了


            获取cookie

                + 直接使用document.cookie

                + 如果里面只有一条cookie

                    == 字符串"a=100"

                + 如果里面有两条cookie  

                    == 字符串"a=100; b=200"

                + 如果里面没有信息

                    == 空字符串 ""


            总结

                == 只有一个操作cookie的办法：document.cookie

                == 浏览器里面，控制台 -> application(应用)-> cookies

                == 是浏览器对象cookie空间的优化

                == 为了让我们看起来更方便一些

                == 上面有一些按钮

                    + 叉子按钮：删除一条cookie

                    + 圈圈斜线按钮：清除所有cookie

                    + 刷新按钮：刷新这个空间的显示信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="update">修改cookie</button>
    <button class="del">删除cookie</button>
    <script>
        /* 
            操作cookie
                + 前端操作cookie的方法
                + 增删改查四个操作
            设置cookie
                + 不带过期时间的语法： document.cookie = "key=value"
                    == 一次设置一条，是不带有过期时间的
                    == 如果想设置过期时间，那么需要一些修饰信息
                + 带过期时间的语法： document.cookie = "key=value;expires=时间对象"
                    == 不管你给他一个什么时间点的时间对象
                    == cookie都会当作世界标准时间来使用了
                    == 因为我们的时间是中国标准时间
                    == 所以我们设置的时间对象要提前8个小时
            修改cookie
                + 和设置cookie是一摸一样的
                + 只不过重新设置一个已经存在的cookie就可以了

            删除cookie
                + 删除cookie就是重新设置一下这个cookie
                + 把过期时间设置成当前时间之前就可以了

            获取cookie
                + 直接使用document.cookie
                + 如果里面只有一条cookie
                    == 字符串"a=100"
                + 如果里面有两条cookie  
                    == 字符串"a=100; b=200"
                + 如果里面没有信息
                    == 空字符串 ""

            总结
                == 只有一个操作cookie的办法：document.cookie
                == 浏览器里面，控制台 -> application(应用)-> cookies
                == 是浏览器对象cookie空间的优化
                == 为了让我们看起来更方便一些
                == 上面有一些按钮
                    + 叉子按钮：删除一条cookie
                    + 圈圈斜线按钮：清除所有cookie
                    + 刷新按钮：刷新这个空间的显示信息

        */

        // 设置一条默认时间的cookie - 会话时效，浏览器关闭就消失了
        document.cookie = "a=100"

        // 准备一个8个小时以前的时间对象
        let time = new Date();
        // 设置时间戳
        time.setTime(time.getTime() - 8 * 60 * 60 * 1000 + 15 * 1000);

        // 设置一个过期时间是15s以后的cookie
        document.cookie = 'b=200;expires=' + time;

        let update = document.querySelector('.update')
        // 当我点击按钮的时候，把a这一条cookie给修改了
        update.onclick = function () {
            document.cookie = "a=修改了"
        }

        let del = document.querySelector('.del')
        // 当我点击按钮的时候，把a这一条cookie给删除了
        del.onclick = function () {
            // 准备一个当前时间之前的时间对象
            let time = new Date();
            time.setTime(time.getTime() - 8 * 60 * 60 * 1000 - 1000);
            document.cookie = "a=1;expires=" + time
        }

        // 获取cookie
        console.log(document.cookie)
    </script>
</body>

</html>