Cookie

Cookie

http（网络传输协议）https（安全）

特点：

无状态 （不知道访问者是谁）

无连接 （不会建立完整的连接 访问一过去 数据已返回连接就断了）

长连接/短连接 （key-alive属性来指定的）

既然我们的http协议是无状态的 那么我们怎么区分对应的访问者（孕育而出了一个sessionID 来做区分）

他访问了我 我给你一个对应的sessionID 他访问了我我同样给他一个sessionID （这个时候我们就可以通过这个sessionID来做区分）

这个sessionID是怎么给到你的呢？

他是通过在访问的时候 给你分发一个sessionID 保存到你的机器上 （存在于你的浏览器上 cookie）sessionID是依赖于cookie进行存储的

cookie会随请求一起过去

这个时候我们的http的无状态就解决了

cookie是浏览器提供的一个存储数据的空间。

正常情况下，我们在页面中动态给div添加一个内容，当时可以在div中看到这个内容，但是等刷新页面的时候，这个

div中的内容又成了空，也就是说，我们动态添加的数据是不持久的。而cookie这个浏览器提供的空间可以让数据持

久。也就是说存在这个空间中的数据等下次刷新页面，数据还是存在的。 对应的Cookie存储对应的sessionID，Cookie相当于一个容器（容器大小只有4k），在浏览器中存储少量的数据，利用Cookie可以实现一些保存数据的功能。

Cookie是一个对象 使用document.cookie来获取对应的cookie
document.cookie = 'name=张三;';

1659963247662

Cookie设置语法：

document.cookie = '键=值;expires=失效时间;path=能使用当前cookie的路径';

var date = new Date(); date.setTime(date.getTime()-1000*60*60*8+8000); // 当前时间的8秒之后
document.cookie = 'age=20;expires='+date+";path=/"; // 斜杠代表服务器的根目录

cookie识别的时间是格林威治时间，而我们获取到的时间是东8区的时间，所以需要减去8个小时，才是当前时间。

此时，在等待8秒之后，cookie就失效了。如果不设置失效时间的话，cookie默认是在当前页面关闭的时候失效，也

称为“会话级别”。

cookie不能一次性设置多个键值对，要设置多个cookie就设置多次：
document.cookie = 'name=zhangsan';
document.cookie = 'age=30';
获取cookie：
var cookie = document.cookie; 
console.log(cookie); // name=zhangsan; age=30

获取到的多条cookie中间使用分号和空格隔开。

修改cookie，就是重新设置。

删除cookie，就是将失效时间设置为当前时间以前。

var date = new Date(); date.setTiem(date.getTime()-1000*60*60*8-1); // 当前时间的上一秒 
document.cookie = 'name=zhangsan;expires='+date;

对应的属性

键=值 （名字=值）

expires 过期时间（关闭浏览器失效）*

path 访问路径（指定对应的路径携带cookie）

domain 跨域 （可以跨域的域名）

secure 安全

URI编码和解码

encodeURIComponent 编码

decodeURIComponent 解码

增删改查

添加 直接赋值

document.cookie = "key=value;"

获取 采用读取字符串的形式

console.log(document.cookie.split(";")[0].split("=")[1]) //拿到value值

删除 设置过期时间

document.cookie = "key=value;expires="+new Date()

修改 重新设置就是修改

document.cookie = "key=hello;"

cookie的特性

Cookie是不安全的

Cookie是可篡改和伪造的

Cookie是以字符串存储的，有很多数据类型是不支持的

Cookie的最大数据量限制为4kb

Cookie会随请求发送

  1. cookie的最大数量限制在50条（不一定，现在浏览器都比较高端，现在的谷歌可以设置150条左右）
  2. cookie有时效性，一般是会话级别（浏览器关闭就过期）
  3. 有域名限制，在当前域名下设置的cookie，只能在当前域名下读取

封装cookie操作

设置cookie封装
function setCookie (key, value, expires) { 
  const time = new Date() 
  time.setTime(time.getTime() - 1000 * 60 * 60 * 24 * 8 + expires*1000) // 用于设置过期时间
  document.cookie = `${key}=${value};expires=${time};`
}
读取cookie封装：
function getCookie(key) { 
    const cookieArr = document.cookie.split(';') 
    let value = '' 
    cookieArr.forEach(item => { 
        if (item.split('=')[0] === key) { 
            value = item.split('=')[1] 
        } 
    })
    return value 
}
删除cookie封装：
function delCookie(name) { 
  setCookie(name, 1, -1) 
}

cookie和localStorage的区别

localStorage容量大于cookie

localStorage存储的位置和cookie不是一个地方

localStorage对应的不会随请求携带（本地缓存）

https://www.mianshigee.com/project/cookie-js/

localStorage的方法

getItem(key) 获取元素

setItem(key,value) 设置元素

removeItem(key) 移除元素

JSON

JSON是一种数据格式（json字符串） 他通用我们对应的网络传输（xml）他是一种数据格式 而在对应的JavaScript他是一种数据类型

json俩种显示方式

对象 {} .key

数组 [] 使用下标

var jsonObj = {}
var jsonArray =[]
反序列化操作 (将字符串变成对象)

JSON.parse() *

eval()

var str = '{"name":"张三","age":12}'; 
var obj = JSON.parse(str); 
console.log(obj); // {"name":"张三","age":12} 这是个对象
序列化操作 （将对象变成json格式的字符串）

JSON.stringify() *

var obj = { 
    "name":"张三", 
    "age":12 
}
var str = JSON.stringify(obj); 
console.log(str); // {"name":"张三","age":12} 这是个字符串

localstorage和cookie存储的格式（字符串）以后再存储数据的时候直接存储json格式字符串 取出的时候利用反序列化转为对象

posted @ 2022-08-09 20:30  CHENNGE  阅读(49)  评论(0)    收藏  举报