day13 Cookie

一、<!-- http和https -->

    <script>

        // http和https是遵从tcp/ip之上的协议

        // http和https（安全）他俩都是负责网络通信  主要浏览器访问 浏览器访问服务器  服务器给我浏览器数据

        // 关于http的特点

            // 无状态 同时两个客户端请求服务器端 他没有办法分辨谁是谁  需要标识

            // 无连接  两者的数据发送完  就断开连接

        // cookie  就是用来解决http的无状态问题 （认为是标识）

        // 每次请求都会带上cookie

        // cookie存在浏览器中

        // session 叫会话  浏览器和服务器通信的过程会产生会话  （每一次会话会会产生对应的session Id）

        // 每次会话产生都会有一个cookie新建  里面存放的是会话的sessionId

        // cookie只能存放少量数据  最多4k  cookie只能存放string类型的值

        //综合一下

        // cookie是存放在浏览器上一个只有4kb的容器  可以解决http请求的无状态问题  而且每次会话里面都会保存对应的sessionId  且每次请求都会带上   里面存放的是string类型的值

    </script>

二、<!-- cookie -->

    <script>

        // cookie里面的数据存储以键值对的形式存储 key value

        // 完整格式  name=value;[expires=date];[path=路径];[domain=域名];[secure]

        // name=value  对应的存值

        // expires 日期 （过期时间）

        // path  lujing

        // damain  域名

        // secure  安全性设置

        // 存值  需要传递key和value

        // document.cookie=`年龄=14，sex=张三`  直接这样设置默认的过期时间为你浏览器关闭以后

        // 我们也可以使用浏览器自带的清除浏览记录，强行清除cookie

        // document.cookie//可以获取也可以设置  获取是string类型  设置时添加一个新的cookie

        // 取值  就只需要key（通过键去拿值）

        // console.log(document.cookie);

        // encodeURIComponent()  对数据进行编码  ascii码  针对这两个方法低版本浏览器不支持中文

        var str=encodeURIComponent('刘德华')

        // decodeURIComponent() 对数据进行解码

        console.log(decodeURIComponent(str));

        // 删除 设置expires 属性（设置过期时间） 时间如果已经过去就不会有过期  到达对应的时间自动失效

        // var date=new Date()

        // date.setSeconds(date.getSeconds+60)

        document.cookie='name=jack;expires='+new Date("2011-3-30 15:25:0:0")

        console.log(document.cookie);

        //存值 document.cookie进行赋值

        document.cookie = "name=jack"

        //只会存在一个cookie因为对应的键一致重新给指定的键赋值相当替换

        document.cookie = 'name=rose'

        //取值document.cookie

        console.log(document.cookie);

        //删除设置过期时间expires设置过期时间设置为当前时间的意思就是说关闭就过期

        document.cookie = 'name=rose;expires='+new Date()

        // path 属性  指定对应的目类下文件可以访问这个cookie （指定可以访问这个cookie路径）

        //  /表示指定根路径下的所有文件都可以  也就是对应根路径的请求都会带上这个cookie

        document.cookie = 'name=rose;expires='+new Date()+';path=/'

        // domain 属性  指定域名  只在这个域名访问下才带上cookie

        document.cookie = 'name=rose;expires='+new Date()+';path=/;domain=http://www.baidu.com'

        //secure 安全  带上就是只有https才能访问  不带都可以访问

        document.cookie = 'name=rose;expires='+new Date()+';path=/;domain=http://www.baidu.com/secure'

    </script>

三、<!-- 封装cookie -->

    <script>

        // 疯转cookie对应方法  常用的key和value expires过期时间 path

        // set的方法

        function setCookie(key,value,date,path){

            if(date instanceof Date){

                document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};expires=${date};path=${path}`

            }else{

                document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};expires=${new Date()};path=${path}`

            }

        }

        // get的方法 获取对应的key的cookie值

        function getCookie(key){

            var key = encodeURIComponent(key)

            var cookies=document.cookie.split(';')

            for (var i in cookies) {

                var index=cookies[i].indexOf('=')

                if (cookies[i].indexOf(key)!=-1){

                    var cvalue=cookies[i].substr(index+1)

                    return decodeURIComponent(cvalue)

                }      

            }

            // var index=document.cookie.indexOf(key)

            // if(index==-1){

            //     return ''

            // }else{

            //     return document.cookie.substr(index+key.length+1,)

            // }

        }

        // remove   间隔几天以后过期

        function removeCookie(key,day){

            var date=new Date()

            date.setDate(date.getDate+day)

            document.cookie=encodeURIComponent(key)+"=;expires=" + date

        }

    </script>

 

四、<!-- json -->

    <script>

        // json是一种结构化的数据格式  它常用于数据传输及相关数据处理

        // 现阶段常用的数据传输方式都是json格式（之前xml传输）所有的语言都具备

        // json格式数据写法  []  {}

        // 其实就是个数组对象  里面的键通常为string类型（建议使用双引号）

        // 里面是以键值对形式储存  键位string类型 值为任意类型 （string类型数据使用双引号）

        var json=[{

            "name":"李四",

            "age":18

        },{

            "name":"王五",

            "age":18

        },

    ]

    console.log(json[1].name);//获取王五

    var json1={

        "arr":["a","b"]

    }

    console.log(json1.arr[1]);//获取b

    // 第一个方法 eval()  解析对应的json格式字符串为对象

    var str=`[{

            "name":"李四",

            "age":18

        },{

            "name":"王五",

            "age":18

        // }]` //str是json格式字符串

        // console.log(str[0].name);//无法获取

        // 我们想要从str中获取李四  先转为对象

        var obj=eval(str)

        console.log(obj[0].name);//eval可以将json格式字符串转为对应的对象  eval会造成安全问题（不推荐）

        // 使用JSON对象的静态方法JSON.parse()里面传入对应的json格式字符串  可以将其转为对象（常用的）

        var obj1=JSON.parse(str)

        console.log(obj1[0].name);//可以获取李四

        // 对应的对象转为json格式字符串  JSON.stringify() 里面传入对象  将其转为json格式字符串

        var jsonStr=JSON.stringify(obj1)

        console.log(typeof jsonStr);

        console.log(jsonStr);

    </script>