cookie,json

cookie,json

http协议讲解

http和https是遵从tcp/ip之上的协议
http和https（安全）他俩都是负责网络通信 主要浏览器访问 浏览器访问服务器 服务器给我浏览器数据
关于http的特点
无状态 （同时俩个客户端请求服务器端 他是没有办法分辩谁是谁）需要标识了（房卡）
无连接 （俩者的数据发送完 就断开连接）
cookie 他就是用来解决http的无状态问题（认为是标识）
每次请求都会带上cookie
cookie存储在浏览器上
session叫会话 浏览器和服务器通信的过程会产生会话 （每一次会话会产生对应的sessionId）
每次会话产生都会有一个cookie新建 里面存放的是会话的sessionId
cookie只能存放少量的数据 最多4kb cookie只能存放string类型的值
综合一下 cookie是什么？
存放在浏览器上的一个只有4kb的容器 他可以解决http请求的无状态问题
而且每次会话里面都会保存对应的sessionId 且每次请求都会带上.里面存放的为string类型的值

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

完整格式 name=value;[expires=date];[path=路径];[domain=域名];[secure] 带[]都是可以省略的

name=value 对应的存值

expires 日期 （过期时间）

path 路径

domain 域名

secure 安全性设置

存值 需要传递key和value

document.cookie = `年龄=李四,sex=张三` //直接这样设置默认的过期时间为你浏览器关闭（会话结束）以后

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

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

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

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

var str = encodeURIComponent('刘德华')

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

console.log(decodeURIComponent(str));

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

document.cookie = 'name=jack;expires='+new Date('2022/3/30 15:05:00')

存值 document.cookie 进行赋值

document.cookie = 'name=jack'

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

document.cookie = 'name=rose'

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'

封装cookie对应的方法 常用的对应的key和value expires过期时间 path

set的方法

function setCookie(key,value,date,path){
    if(date instanceof Date){// instanceof是否俩个属于同一个类型
        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 value = cookies[i].substr(index+1)
            return decodeURIComponent(value)
        }
    }
    return ''
}

remove 间隔几天以后过期

function removeCookie(key,day){
    var date = new Date()
    date.setDate(date.getDate+day)
    document.cookie = encodeURIComponent(key)+'=;expires='+date
}
// function removeCookie(name) {
//     document.cookie=encodeURIComponent(name)+"=; expires=" + new Date();
// }

json

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

使用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(obj1.toString()); //toString格式化的对象无法识别
console.log(jsonStr);