• js的cookie设置

    完整代码
    <body>
    <script>
        //存储在cookie中的数据， vscode中安装live server插件查看cookie。
        //cookie不支持以运行本地文件的方式增删改查。
        /* 
        一、Cookie是什么 ?
            cookie是一种客户端把用户信息以文件形式存储到本地硬盘的技术。

        二、Cookie的作用
            cookie的作用很单一，就是存储客户数据。(存储数据的文件叫Cookie文件)

        三、cookie的注意事项
            1、不同浏览器存放cookie的位置不同，不能通用。
            2、cookie文件的存储以域名形式进行区分的。
            3、一个域名下存放cookie的数量是有限的。
            4、每个cookie存放的内容大小也是有限的。
        */
        //本地存储
        // localStorage.setItem("name", "靳伟哲")
        // localStorage.getItem("name")

        // cookie的增删改查
        // 增加/设置 cookie
        // 会话cookie(seccion cookie)，不设置数据的过期时间，默认cookie在浏览器关闭时删除，
        // 格式 “key=value”
        // cookie存储
        // 不用live server运行的话，单纯打开文件绝对路径去运行是没有cookie的
        // document.cookie = "username=靳伟哲"
        // document.cookie = "age=20"
        //查找/读取cookie
        console.log(document.cookie);//这种方式会查找所有cookie的数据，以字符串形式返回
        //使用分隔替换等方法将字符串转换为对象,/\s/g,全局匹配空格
        let cookiestr = document.cookie.replace(/\s/g, '').split(";")
        console.log(cookiestr);
        // 修改cookie只需要重新赋值即可
        // document.cookie = "age=50"


        //删除cookie
        //直接将cookie的有效时间设置为过去即可。
        let date = new Date()//获取当前时间
        //获取当前时间的毫秒数gettime()
        //setTime()根据毫秒数设置时间
        // date.getTime()-1设置获取到的上一秒时间
        console.log(date.toUTCString());//查看世界时间
        date.setTime(date.getTime() + 1000 * 10)//单位为毫秒，设置几秒后删除cookie
        //使用方法设置好cookie然后把下面代码注释开，最后关闭页面，把下面设置cookie和时间的都注释掉，静等两分钟看浏览器即可。
        document.cookie = `age=50;expires=${date.toUTCString()}`

        console.log(document.cookie);


             /*
            cookie的使用场景:
                名字cookie:
                用户在网页输入名字时，名字可以记录在cookie中;再次访问网站时，会收到类似""welcome靳伟哲!“的欢迎词。
                保存用户登录信息:
                访问登录界面时，一般会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证，就可以通过cookie保存用户的id。
                日期cookie:
                用户访问网页时,可将当前的日期存储于cookie中。再次访问网页时，会收到类似这样的消息: "Your last visit was on Tuesday August 11,2022!"。日期也是从cookie中获取。
                购物车，跟踪用户行为等.....

        */
    </script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    存储方式的完整代码
    <body>
    <script>
   /* 
        cookie的存储方式：
            seccion cookie(会话cookie)
                是一种临时的cookie，存在内存中，浏览器关闭，会话cookie就被删除。
            持久化cookie:
                存储在硬盘上，不同的操作系统，浏览器存储位置不同。不管浏览器退出还是电脑重启，持久化cookie都存在，持久cookie有过期时间，过了过期时间就会自动删除
   */

   //会话cookie
   document.cookie="sex=男"
   //持久化cookie，需要设置过期时间
   let data=new Date()
   let gettime= data.getTime()//获取当前时间的毫秒数
   data.setTime(gettime+1000*20)//设置的为毫秒单位，将过期时间设置为打开浏览器的20秒之后
   console.log(data.toUTCString());//打印世界时间，北京时间为当前时间加8小时
   //使用时先设置下面的数据打开浏览器看cookie，然后把下面数据注释掉再返回浏览器等待20秒看cookie
    document.cookie=`name=萧寂;expires=${data.toUTCString()}`//两个参数，第一个为设置的cookie数据，用分号分隔，第二个为过期结束时的世界时间，北京时间加8小时
    </script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    cookie介绍

    cookie不支持以运行本地文件的方式增删改查。存储在cookie中的数据， vscode中安装live server插件查看cookie。
    一、Cookie是什么 ?
    cookie是一种客户端把用户信息以文件形式存储到本地硬盘的技术。
    二、Cookie的作用
    cookie的作用很单一，就是存储客户数据。(存储数据的文件叫Cookie文件)
    三、cookie的注意事项
    1、不同浏览器存放cookie的位置不同，不能通用。
    2、cookie文件的存储以域名形式进行区分的。
    3、一个域名下存放cookie的数量是有限的。
    4、每个cookie存放的内容大小也是有限的。

    cookie增删改查

    cookie的增删改查
    增加/设置 cookie
    会话cookie(seccion cookie)，不设置数据的过期时间，默认cookie在浏览器关闭时删除，
    格式 “key=value”
    cookie存储
    不用live server运行的话，单纯打开文件绝对路径去运行是没有cookie的

    增
       document.cookie = "username=xiaoji"
   document.cookie = "age=20"

    • 1
    • 2
    删

    不设置时间默认浏览器关闭删除
    设置时长到达过期的代码如下

      	    //直接将cookie的有效时间设置为过去即可。
        let date = new Date()//获取当前时间
        //获取当前时间的毫秒数gettime()
        //setTime()根据毫秒数设置时间
        // date.getTime()获取当前时间
        console.log(date.toUTCString());//查看世界时间
        date.setTime(date.getTime() + 1000 * 10)//单位为毫秒，设置几秒后删除cookie，这里为10秒
        //使用方法打开浏览器页面，查看cookie值，最后把下面设置cookie和时间的(下面这行)注释掉，静等两分钟看浏览器即可。
        document.cookie = `age=50;expires=${date.toUTCString()}`//给添加的cookie值加上日期

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    改
    修改cookie只需要重新赋值即可
        document.cookie = "age=50"

    • 1
    • 2
    查
    		console.log(document.cookie);//这种方式会查找所有cookie的数据，以字符串形式返回

		//使用分隔替换等方法将字符串转换为对象,/\s/g,全局匹配空格
        let cookiestr = document.cookie.replace(/\s/g, '').split(";")
        console.log(cookiestr);

    • 1
    • 2
    • 3
    • 4
    • 5

    cookie使用场景

    名字cookie:
    用户在网页输入名字时，名字可以记录在cookie中;再次访问网站时，会收到类似""welcome 萧寂!“的欢迎词。
    保存用户登录信息:
    访问登录界面时，一般会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证，就可以通过cookie保存用户的id。
    日期cookie:
    用户访问网页时,可将当前的日期存储于cookie中。再次访问网页时，会收到类似这样的消息: “Your last visit was on Tuesday August 11,2022!”。日期也是从cookie中获取。
    购物车，跟踪用户行为等…

    cookie的存储方式

    cookie的存储方式：
    seccion cookie(会话cookie)
    是一种临时的cookie，存在内存中，浏览器关闭，会话cookie就被删除。
    持久化cookie:
    存储在硬盘上，不同的操作系统，浏览器存储位置不同。不管浏览器退出还是电脑重启，持久化cookie都存在，持久cookie有过期时间，过了过期时间就会自动删除

    会话cookie
       document.cookie="sex=男"
   document.cookie="age=20"

    • 1
    • 2
    持久化cookie,需要设置过期时间
       let data=new Date()
   let gettime= data.getTime()//获取当前时间的毫秒数
   data.setTime(gettime+1000*20)//设置的为毫秒单位，将过期时间设置为打开浏览器的20秒之后
   console.log(data.toUTCString());//打印世界时间，北京时间为当前时间加8小时
   //使用时先设置下面的数据打开浏览器看cookie，然后把下面数据注释掉再返回浏览器等待20秒看cookie
   document.cookie=`name=萧寂;expires=${data.toUTCString()}`//两个参数，第一个为设置的cookie数据，用分号分隔，第二个为过期结束时的世界时间，北京时间加8小时

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    封装设置和获取cookie的函数

    设置cookie的函数

    参数1：设置的cookie的key值，也就是cookie的名字
    参数2：设置的cookie的value值，就是cookie的数据
    参数3：设置cookie的过期时间(有效期)（正值:设置有效期，负值:删除cookie，因为负值在当前打开浏览器前删除，所以负值就是删除cookie）

            function setcookie(cname, value, cexpires) {
				let data=new Date()
	            let datatime=data.getTime()//获取当前时间
	            data.setTime(datatime+cexpires*1000*60*60*24)//设置过期时间，单位为天
	            let expires="expires="+data.toUTCString()//拼接世界时间的过期时间（有效期数据），北京时间为当前时间加八小时即可
           	    document.cookie=`${cname}=${value};${expires}`//设置cookie数据和过期时间，中间用分号分隔
        }
        setcookie("xiaoji",520,2)//设置了xiaoji=520的cookie，2天后失效
        setcookie("nihao",100,-2)//设置了nihao=100的cookie，打开浏览器2天前就失效了，相当于打开浏览器就删除了

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    获取cookie的函数

    参数为cookie的key值，cookie的名字

            function getcookie(cname) {
            //拼接=是为了查找更准确，比如输入name也回去查找nameuser,或者namexiaoji，在后面拼接=为了精确查找我们需要的值
            let name=cname+"="
            let ck=document.cookie.replace(/\s/g,"").split(";")//:/\s/g 全局匹配空格，将空格替换空字符串，最后用分号分隔，将返回的数据替换成数组
            console.log(ck);
            for(let i=0;i<ck.length;i++){
                //查找name这个key第一次出现的索引值，如果为0，则符合条件
                //如果为其他则不满足，如name,uaername,都包含name，但是只需要name的key和value，所以name第一次出现的索引值必须为0
                if(ck[i].indexOf(name)==0){
                    console.log(ck[i]);
                    console.log(name.length);

                    //因为name的长度cname+"="，刚好截取的长度为name.value
                    //截取key的长度加=之后的value的值，截取的长度为name.length
                    return ck[i].substring(name.length)
                }
            }
        }
        console.log(getcookie("xiaoji"));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    根据两个封装的函数做个小案例
    		//先检测cookie中有没有username
        //创建一个检测cookie的函数
        //如果设置了cookie，将显示一个问候信息
        //没有设置cookie，弹出prompt，用于询问用户姓名，将用户姓名存入cookie

        function checkCookie() {
            //先获取用户信息username
            var user = getcookie("username")

            if (user) {
                alert("欢迎" + user + "再次访问")
            } else {
                user = prompt("请输入你的名字：")
                console.log(user);
                // console.log(Boolean(user));
                if (user) {
                    //key value 有效期
                    setcookie("username", user, 30)
                }
            }
        }
        checkCookie()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    cookie参数

    cookie 有一个很重要的概念，就是cookie的作用域
    cookie的作用域为当前域及其子域
    设置cookie的参数
    Cookie未设置secure属性，攻击者可以通过嗅探HTTP形式的数据包获取到该cookie。
    document.cookie=“name=value;expires=有效期;domain=域名;path=有效路径;secure=true/false”
    name，必需值, cookie名称
    value，必需值, cookie的值
    expires，可选，cookie有效期
    domain，可选。规定cookie的域名。
    不设置此参数时，默认为当前主机域名
    127.0.0.1 当前主机域名
    path，可选，规定cookie的有效服务路径。参数domain基础上设置有效路径。
    不设置默认，在当前目录及子目录都有效
    “/“就是在整个domain都有效
    如果path设置为”/test”,namecookie只在 domain下的/test目录及子目录里有效。
    cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,也就是说, cookie可以跨越一个域说cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。

    cookie的domain的path介绍

    项目结构

    在这里插入图片描述

    domain参数可以设置父域名以及自身，但不能设置其它域名过，包括子域名，否则cookie不起作用。
    那么cookie的作用域;
    cookie的作用域是domain本身以及domain下的所有子域名。

    在index里写下下面代码
             document.cookie = "name=/index目录有效"
        //默认不定义path,cookie只对当前目录(/index)及其子目录有效

        //path=/表示cookie在整个域名下都有效
        document.cookie = "golobal=整个域名都有效;path=/"

		// encodeURI()中文加密
        // decodeURI()中文解密
		//如果是设置当前域下别的文件的cookie，需要指定文件路径从根目录开始拼接，如果有中文，需要用encodeURI进行编码，英文的话直接拼接路径即可
		//指定文件路径，表示cookie只在指定文件内有效
        let path = encodeURI("/作业/11.8/cookie作用域/test")
        document.cookie = `pathtest=/test有效数据;path=${path}`

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    jQuery的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>
    <link rel="stylesheet" href="">
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入cookie插件 -->
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body>
    <script>
        //cookie
        //分为:会话cookie:浏览器关闭时过期.
        //持久化cookie:有效期之内一直存在,过了有效期就不存在
        //创建cookie

        //创建会话cookie(未指定过期时间)
        //默认情况下,cookie的有效路径为根目录及其子目录.
        $.cookie("name", "jinweizhe");
        //持久化cookie
        //参数1,2,3:key value 配置项{expires:cookie有效期,以天为单位}
        $.cookie("age", 20, { expires: 3 })
        //创建持久化cookie,并设置其有效路径.
        $.cookie.raw = true;//将中文编码转换为中文,只对当前代码以下有作用.中文存入时会进行编码,读取时解码,true为取消编码
        $.cookie("sex", "男", { expires: 7, path: `${encodeURI("/03-个人练习和作业/11.28")}` })
        //读取cookie
        console.log($.cookie());//读取所有的cookie返回object
        console.log($.cookie("age"));//读取cookie的age,读取不存在的返回undefined
        //删除cookie,成功为true,失败为false
        let res = $.removeCookie("name");
        console.log(res);

        //将数据展示到页面上
        $.cookie.raw = true;//将中文编码转换为中文,只对当前代码以下有作用.中文存入时会进行编码,读取时解码,true为取消编码
        $.cookie("nickname", "小明");
        let name = $.cookie("nickname");
        $("
    "    ).text(name).appendTo($("body"))



        $.cookie.json = true;//json属性取值为true时，设置cookie的数据使用json格式存储与读取。

        let obj = {
            aaa: 111,
            bbb: 222
        }
        // let obj2=JSON.stringify(obj);//对象需要转换为json字符串再存储
        // $.cookie("obj",obj2)
        $.cookie("obj", obj)
        //取出对象属性
        console.log(JSON.parse($.cookie("obj")));
    </script>
</body>

</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
  • 相关阅读:
    C++ merge()和inplace_merge()函数用法详解(深入了解,一文学会)
    VoLTE基础自学系列 | VoLTE中的DNS和eNUM需要定哪些资源记录？
    制作U盘启动盘
    虚拟机安装问题，遇到报错，求解
    毕业论文管理系统的设计与实现
    matlab新手快速上手5（蚁群算法）
    2023年最新一面二面通关王炸java八股文面试题--持续更新
    ubuntu20.04 nerf Instant-ngp
    js字符串常用方法
    Android内存优化的知识梳理
  • 原文地址：https://blog.csdn.net/weixin_68658847/article/details/127746174