cookie和JSON

cookie的概念

cookie 也叫 HTTPCookie，是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术。

• cookie存在于浏览器端
• cookie为了保存sessionID出现的
• cookie的出现解决了http无状态的问题

cookie的特性

• cookie是不安全的
• cookie是可以被篡改和伪造的
• cookie他是以字符串存储的（单一），有很多的数据类型是不支持的（二进制图片，二进制的视频，base64码的视频等等）
• cookie他的大小不能超过4kb（大小只有4kb 容量小）
• cookie会随请求发送
• cookie可以跨域（domain来设置）

cookie的使用

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

• name=value: 为你要保存的键值对(必选)
• expires=date: 表示cookie的失效时间, 默认是浏览器关闭时失效(可选)
• path=路径: 访问路径, 默认为当前文件所在目录(可选)
• domain=域名: 访问域名, 限制在该域名下访问(可选)
• secure: 安全设置, 如果设置了则必须使用https协议才可获取cookie(可选)

cookie的相关操作（增删改查的功能）

        //主要是封装的cookie的增删改查的方法
        //根据key来获取cookie里面的元素
        // password=123456; username=123456
        function getItem(key){
           var str =  document.cookie
           //对于这个字符串进行切割
           var splitArr = str.split(';') //[password=123456,username=123456]
           var cookieObject = {}
           //遍历这个数组
           for(var splitStr of splitArr){//password=123456
                var keyValueArr = splitStr.split('=')
                cookieObject[keyValueArr[0].trim()] = decodeURIComponent(keyValueArr[1])
           }
           return cookieObject[key]
        }
        //设置cookie及里面的元素
        function setItem(key,value,expires,path,domain,secure){
            //如果没有key获取没有value 直接报错
            if(!key || (!value && value!='')){
                //抛出错误 后面的代码将不会执行
                throw new Error('参数错误')
            }
            document.cookie = `${key}=${encodeURIComponent(value)}`
            if(expires){//如果有过期时间拼接
                document.cookie += `;expires=${expires}`
            }
            if(path){//如果有路径拼接
                document.cookie += `;path=${path}`
            }
            if(domain){//如果有domain拼接
                document.cookie += `;domain=${domain}`
            }
            if(secure){//如果有secure拼接
                document.cookie += `;${secure}`
            }
        }
        //根据key来删除对应的cookie
        function removeItem(key){
            if(getItem(key) || getItem(key)==''){
                setItem(key,'',new Date())
            }else{
                console.error('当前的key值不存在')
            }
        }

cookie.js(第三方的js)

Cookies.remove('username')
Cookies.get('username')
Cookies.set('username','jack',{expires:10}) //设置一个username 10天以后过期

encodeURIComponent 转码

console.log(encodeURIComponent('{abdejde152}'));

decodeURIComponent 解码

var str = encodeURIComponent('{abdejde152}') //进行编码
console.log(decodeURIComponent(str));//解码

JSON的概念

json是一种数据格式，他广泛应用于数据传输，（目前大部分的数据传输的格式都是采用json（跨平台 不区分语言）restful接口 就是使用json数据进行传输的）。

json的表示形式

//数组[]
var jsonStr = '[]'

//对象{}
var jsonStr = '{}'

JSON格式的要求 里面的key必须是" "括起来的
一般数据是从后台获取 他返回给的json格式的数据是字符串（虽然对应的js可以解析json格式 但是后台如果给你的是字符串的话 那么你就需要进行序列化和反序列化）

序列化（将一个内容写入到另一个东西里面叫序列化）

        var user = {
        username:
        'jack',
        password:"123"
        }
        //toString方法 打印栈地址
        console.log(user.toString())
        //将对应的对象变成json格式的字符串
        console.log(JSON.stringify(user))

反过来从一个东西里面获取另一个东西 叫反序列化

将json格式的字符串变成对象

var jsonStr = '{"username":"jack"}'
console.log(JSON.parse(jsonStr).username)

localStorage(本地存储)

localStorage和cookie的区别

• cookie的大小只有4kb 对应的localstorage有5M
• cookie会随请求发送 localstorage不会随请求发送
• cookie只能存储字符串 localstorage可以存储对应的图片以及视频的二进制
• 存储的位置不一样的
• cookie是可以过期的 localstorage不能过期

localStorage和cookie的共同点

• cookie和localstorage都是存储在浏览器上
• 存储的内容的形式都是以字符串形式