• Cookie的作用范围、设置、创建、获取的方法


    cookie的作用范围

    同一浏览器,同一路径

    默认情况下,

    上级目录设置的cookie,下级目录可以获取到,

    而下级目录设置的cookie,上级目录不能获取。

    即:在一个页面设置cookie,那么这个页面的同一路径和子路径下的页面都可以获取cookie

    示例如下:family文件夹下有children文件夹和a.html,b.html;chilren文件夹下有aa.html

    若在a.html设置cookie:one=father;那么a.html,b.html和aa.html都可以获取到cookie:one=father;

    然后再aa.html设置cookie:two=son,那么只有aa.html可以获取到cookie:two=son,

    a.html和b.html都获取不到cookie:two=son

     问题如何让上级获取到下级目录设置的cookie呢

    则设置path属性,

    设置整站都可以访问,上级就可以获取下级设置的cookie了

    document.cookie = "key=value;path=/"

    如果还需要设置cookie的到期时间

    需要expires属性

    格式为

    document.cookie = "key=value;expires=到期时间" 

    示例

      var date = new Date();
        //设置有效时间为一个小时,一小时过后,将被浏览器删除
        var expireTime = 30*60 * 1000;
        date.setTime(date.getTime() + expireTime);
        //escape()的作用:一种编码方式
        document.cookie = "key=value;expires="+ date.toGMTString();

    若cookie需设置多个属性,属性之间用分号";"隔开

    示例同时需要设置expires和path属性

    document.cookie = "key=value;expires=到期时间;path=/" 

     cookie创建的函数

    function saveCookie(key, value) {
        var date = new Date();
        //设置过期时间为一个小时
        var expireTime = 60*60 * 1000;
        date.setTime(date.getTime() + expireTime);
        //escape()的作用:一种编码方式
        //设置cookie过期时间为一小时以后,整站可以访问cookie
        document.cookie = key + "=" + escape(value) + ";expires="
                + date.toGMTString();+"path=/";
    }

    获取cookie函数

    function getCookie(key) {
        // 可以搜索RegExp和match进行学习
        var arr, reg = new RegExp("(^| )" + key+ "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
            // unescape的作用解码通过escape编码的字符串
            return unescape(arr[2]);
        } else {
            return null;
        }
    }
  • 相关阅读:
    vue3 中的路由传参
    js还原底层简单的history路由
    js还原底层简单的hash路由
    使用proxy以及Reflect还原vue3中的shallowReadonly 与 readonly响应式的原理
    flex布局兼容浏览器处理
    使用proxy以及Reflect还原vue3中的shallowReactive与reactive响应式的原理
    TS学习笔记--其他(声明文件、内置对象)
    TS学习笔记--泛型
    TS学习笔记--函数
    springboot+mybatis-plus快速精简配置
  • 原文地址:https://www.cnblogs.com/wei-jing/p/12369104.html
Copyright © 2020-2023  润新知