标签：00 value json localStorage key cookie

Cookie

概述:cookie是解决http的无状态的

cookie的特性
cookie是存储在浏览器上的
cookie的存储大小为4kb
cookie会随着请求发送
cookie可以跨域(设置domain),默认是不可以
cookie可以设置时间,时间一到就自动过期
cookie容易被篡改(伪造),不安全

cookie的存储格式

key = valu; //键值对象

expires = 日期; //设置过期时间

path = 地址; //在对应的路径下携带cookie

domain = 域名; //跨域的域名

secure //安全

cookie的相关操作

cookie是一个盒子,是位于浏览器上的,具备增删改查的方法

document.cookie || chrom.cookie //获取cookie

增 (给对应的cookie进行赋值)

var date = new Date(2022,10,22)
document.cookie = `name = 123; expires = ${date}`

删 (设置过期时间)

var date = new Date() //设置过期时间为对应的当前时间 并不会马上删除 而是在对应的浏览器关闭之后才会删除
document.cookie = `name = jack; expires = ${date}`//设置时间如果已经过了,cookie则还会存在
//如果没有设置过期时间,默认的过期时间是session session的过期时间是浏览器关闭的时候

改 (给cookie里面的已经存在key进行重新赋值)

document.cookie = 'name = jack' //修改相当于重新赋值

查 (直接读取对应的cookie)

console.log(docunment.cookie) //查询cookie 不赋值就是查询,而且只会显示对应的key = value 其它的不会显示

cookie相关操作封装

//获取方法 通过对应的key 获取对应的cookie的值
function get(key){
    //获取cookie的字符串
    var cookieStr = document.cookie
    var cookies = cookieStr.split(;)
    for(var c of cookies){
        //将对应的值进行分割
        var cookieArr = c.trim().split('=')
        //将第一个值当做key 第二个当做value {key:value}
        cookie[cookieArr[0]] = cookieArr[1]
    }
    return cookie[key]
}
//封装一个设置相关方法
function set(key,value,expires,path,domain,secure){
    //检测看有没有key ,如果没有直接报错
    if(!key){
        throw new Error('必须填入key值')
    }
    //检测有没有value,没有将value设置为空字符串
    if(!value){
        value = ''
    }
    var cookieStr = `${key}=${value}`
    //检测传入的过期时间是日期类型
    if(expires instanceof Date){
        cookieStr += `;expires=${expires}`
    }
    //检测有path的话
    if(path){
        cookie += `;path=${path}`
    }
    //检测有domain的话
    if(domain){
        cookie += `;domain=${domain}`
    }
    //检测有secure的话
    if(secure){
        cookie += `;secure`
    }
    document.cookie = cookieStr
}
//删除方法就是设置过期时间 
function remove(key,value,expires){
    set(key,value,new Date())
}

第三方封装的cookie

cookie.js(vue里面采用了)

1.下载 (js文件)

2.打开官网 (看对应的demo) (看源码)

<script src='./cookie.min.js'></script>
<script>
    //核心对象 window.Cookie
    //get 获取的 set 设置 remove 删除
    Cookie.set('name','tom')
    console.log(Cookie.get('name'));
    Cookie.remove('name','tom')
</script>

核心方法

set 设置方法
get 获取方法
remove 删除方法

JSON格式

概述: json是一种数据传输的格式,对应的数据传输中以后会常用到json.json传输格式的好处(跨平台, 跨语言)

json格式的表示方式

//对象{}
var json = {}

//数组[]
var json = []

json文件里面的key必须是字符串,字符串必须是双引号括起来.

歌词数据

{"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":9,"lyric":"[00:00.000] 作词
: 陈思宇/谈晓珍/潘瑛\n[00:00.746] 作曲 : Lee Yong Min/Hwang Se Joon\n[00:01.492]Rap
词：MC HAN韩勇\n[00:10.985]RAP：\n[00:11.705]Ya boy MC HAN\n[00:14.454]我弹的钢琴都
是为了你弹\n[00:16.577]弹了那么久还是觉得浪漫\n[00:19.434]我弹的时候能听到你在唱
\n[00:21.412]感觉上你在这\n[00:22.580]跟我一起说话\n[00:23.964]一天到晚 我不停地想
\n[00:26.197]You’re all that I think of\n[00:27.826]You’re all that I
want\n[00:28.929]跟你一起总是让我特别开心\n[00:31.190]不论发生什么事我永远爱你
\n[00:33.716]如果你突然打了个喷嚏 那一定就是我在想你\n[00:38.058]如果半夜被手机吵醒 啊那
是因为我关心\n[00:42.620]常常想你说的话是不是别有用心\n[00:47.463]明明很想相信 却又忍不住
怀疑\n[00:52.558]在你的心里 我是否就是唯一 爱就是有我常烦着你\n[01:01.420]Ho Baby 情话
多说一点 想我就多看一眼\n[01:07.028]表现多一点点 让我能 真的看见\n[01:11.363]Oh Bye 少
说一点 想陪你不止一天\n[01:16.430]多一点 让我 心甘情愿 爱你\n[01:35.835]喜欢在你的臂弯
里胡闹 你的世界是一座城堡\n[01:40.409]在大头贴画满心号 贴在手机上对你微笑\n[01:45.169]常
常想我说的话你是否听得进去\n[01:50.040]明明很想生气 却又止不住笑意\n[01:54.734]Oh Oh 在我
的心里 你真的就是唯一 爱就是有我常赖着你\n[02:03.785]Ho Baby 情话多说一点 想我就多看一眼
\n[02:09.130]表现多一点点 让我能 真的看见\n[02:14.255]Oh Bye 少说一点 想陪你不止一天
\n[02:18.766]多一点 让我 心甘情愿 爱你\n[02:23.603]就这样 一天多一点 慢慢地累积感觉
\n[02:28.811]两人的世界 就能够贴近一点\n[02:37.339]Ho Baby 情话多说一点 想我就多看一眼
\n[02:42.969]表现多一点点 让我能 真的看见\n[02:47.728]Oh Bye 少说一点 想陪你不止一天
\n[02:52.449]多一点 让我 心甘情愿 爱你\n[02:57.118]Ho Baby 情话多说一点 想我就多看一
眼\n[03:02.191]表现多一点点 让我能 真的看见\n[03:06.923]Oh Bye 少说一点 想陪你不止一天
\n[03:11.429]多一点 让我 心甘情愿 爱你\n[03:16.584]多一点 才会慢慢发现 因为你 让我心
甘情愿\n[03:26.227]（OT：Nae Yae Gil Eo Bwa）\n"},"tlyric":
{"version":0,"lyric":""},"code":200}

获取歌词
console.log(json.lrc.lyric)

JSON的序列化和反序列化

序列化 (就是把一个json对象转为对应的字符串) JSON.stringify()

//JSON.stringify() //转为json格式的字符串
var jsonStr = JSON.stringify(onj)
console.log(jsonSr)

反序列化 (把一个json格式字符串转为对应的对象) JSON.parse()

//JSON.parse() //将json格式的字符串转换对应对象
var obj = JSON.parse(jsonStr)
console.log(obj)

本地缓存

localStorage 本地缓存 (持久化存在)

//setItem 设置元素 key value
//getItem 获取元素 通过key来获取value
//removeItem 移除元素 根据key删除对应元素
localStorage.setItem('username','jack');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username')

sessionStorage 本地缓存 (跟服务器的seeion一致关闭浏览器就没有了)

sessionStorage.setItem('password','123');
console.log(sessionStorage.getItem('password'));
sessionStorage.removeItem('password')

localStorage (作为客户端缓存) 和sessionStorage (做服务器的缓存用户信息)区别

localStorage 会持久化存在
sessionStorage浏览器关闭就没有了
localStorage和seessionStroage地址错误

localStorage和cookie的区别

local存在大小为5m左右 cookie只有4kb左右

cookie会随请求发送 localStorage不会

cookie中存储的数据对应的类型较小 (图片的base码) localStorage可以存储

cookie可以跨域 localStorage不能 (主动删除不然一直都在)

cookie和对应的localStorage存储位置不一样

共同点

localStorage和cookie都是存放对应的字符串

localStorage和cookie都是位于浏览器上

标签：00,value,json,localStorage,key,cookie
From： https://www.cnblogs.com/luochenhuan/p/16833574.html

cookie