cookie学习整理

什么是cookie？
cookie是浏览器的一个功能，是前端浏览器的一种存储机制。本质上是在浏览器内建立一个文档文件，来存储浏览器执行页面时产生的一些数据。这些数据是各个浏览器都要使用的公共数据，会存储在cookie

cookie的时效
cookie存储的数据不会一直存储在浏览器的文件中，容易被攻击造成数据泄露。为了确保数据的安全性，cookie存储的数据是有时效性的，也就是有存储时间。如果到达存储事件，浏览器会自动删除cookie中存储的数据
cookie的时效性设定的是一个时间节点，超过这个时间节点的话浏览器会自动删除cookie数据。如果没有设定时效默认是会话时间。所谓的会话时间，是浏览器打开执行前端程序的时间，也就是页面关闭的话cookie就会被删除

 <script>
        //必须要通过服务器运性前端程序，才会有cookie设定。直接运行页面就设定cookie是有问题的
        //设定cookie必须是键值对形式的字符串，'键名=数值'。没有设定时效的话默认是会话时效
        document.cookie = 'name=张三';
        
        // 给cookie设定指定的时效是服务器时间，不是本地当前时间。服务器时间是世界标准时间，与中国时区有-8个小时的时差 
        // 设定cookie时间的语法
        document.cookie = 'name=张三;expires=时间对象';
        // 例如时间对象表示的时间是2020-5-1 0:0:0 (服务器时间)，cookie的时效就是2020-5-1 0:0:0 (服务器时间)
        
        function mySetCookie(key,value,time){
            // JavaScript中时间单位默认是毫秒

            // 1,获取当前时间对象
            const nowTime = new Date();

            // 2,获取当前时间对象中的时间戳
            // 当前时间的时间戳和服务器时间,有8个小时的时差
            let t = nowTime.getTime();

            // 3,减去8个小时(毫秒)的时差，当前时间相对应的服务器时间戳 
            t = t - (8*60*60*1000); 

            // 4,加上设定的cookie的时效性时间，time是秒，要转化为毫秒 ---  秒 * 1000
            t = t + time*1000;

            // 5,将时间戳设定回时间对象，时间对象就具有了cookie设定需要的服务器时间戳
            nowTime.setTime(t);

            // 6,将这个时间对象设定给cookie,作为时效性。如果有时间时效参数，设定cookie的时效是指定的时效时间。如果没有时间时效参数，应该设定的是会话时效

            // 通过三元运算符来做判断
            console.log(time);  //如果没有给time传参,time是undefined
            // 如果 time 是 undefined 证明 time 没有输入参数
            //      给 a 赋值空字符串  a中就没有任何内容
            // 如果 time 不是 undefined 证明 time 有输入参数
            //      给 a 赋值计算后的 nowTime 时间对象
            let a = time === undefined ? '' : nowTime ;

            document.cookie = `${key}=${value};expires=${a}`;

        }
        // 每次执行,都是在当前时间基础上,给cookie增加60秒的时效
        // 刷新页面实际是重新执行设定cookie函数
        // 函数每次执行都会在当前时间基础上增加60秒时效
        // 要是页面没有设定 cookie函数的执行,不会影响 cookie时效的设定
        mySetCookie('age','18',3600);
        mySetCookie('sex','男',3600);
        mySetCookie('addr','北京',3600);
        // 删除cookie
        // 定义相同的键名,数值任意,时间是0或者负数都可以
     
        // 解释问题
        // 1, 直接设定cookie
        //    document.cookie = 'name=张三';
        //    会话时效,页面关闭,cookie就消失
        // 2, 通过函数设定
        //    mySetCookie('age','18',60);
        //    指定时效,只要不超过时间,cookie就会一直存在
        // 3, cookie不光是当前页面可以看到,同源的其他页面也可以看到
        //    一般是操作方式是
        //    在一个页面设定好cookie,在其他页面根据cookie来进行操作
        //    例如,在一个页面登录账号,同时设定cookie
        //    其他页面也可以读取这个cookie,只要有这个cookie,就可以不用再次登录了
        //    如果是会话时效的cookie,关闭页面,cookie小时,再次打开页面,就没有这个cookie,需要再次登录
        //    如果是设定时间的cookie,只要不超过这个事件,cookie都会存在,也就不需要再次登录了
        // 4, 关于cookie时效的计算
        //    (1),JavaScript中,所有的时间,默认都是毫秒,计算时,必须按照毫秒计算
        //    (2),服务器时间与中国时区时间,有8个小时的时差
        //        如果不计算这个时差,设定60秒时效,实际是8小时零60秒时效
        //    (3),要在当前时间戳继承上 增加 设定的 时效时间
        //        参数的时效时间是秒 * 1000 转化为 毫秒
        //        当前时间戳 - 8小时的毫秒 + 时效时间的毫秒
        // 5, 如果没有 时效时间 参数
        //    应该是设定为会话时效
        //    给 expires 通过三元运算符 赋值
        //    如果 time 是 undefined , 赋值空字符串 
        //    如果 time 不是 undefined , 赋值计算后的时间对象
        //    如果直接写不管有没有时间时效参数,都赋值 设定的时间对象
        //    看上去效果也是 会话事件时效 
        //    但是低版本的浏览器不支持这个效果,会设定为当前时间
        //    当前时间一执行,就会过期,就会直接删除
        //    为了兼容低版本浏览器,要写成赋值形式
        // 6, 删除cookie
        //    设定键名,数值任意,时间设定为 负数或者0 ,让cookie一设定就过期
        //    就不会出现在cookie
        // 7, 东时区,是当前时间 - N小时 是标准时间   东8区 当前时间 - 8小时
        //    西时区,是当前时间 + N小时 是标准时间   西8区 当前时间 + 8小时
        //    
    </script>