cookie的特点
1.只能存储文本
2.单条存储有大小限制4KB左右
数量限制（一般浏览器，限制大概在50条左右）
3.读取有域名限制：不可跨域读取，只能由来自写入cookie的同一域名可进行读取。简单的将就是，那个服务器发给你的cookie，只有哪个服务器有权利读取
4.时效限制：每个cookie都有时效，默认的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁，但是我们也可以在存储的时候手动设置cookie的过期时间
5.路径限制：存cookie时候可以指定路径，只允许子路径读取外层cookie，外层不能读取内层。
<!--
* @Date: 2023-03-21 08:49:36
* @LastEditors: Mei
* @LastEditTime: 2023-03-21 09:59:17
* @FilePath: \vscode\cookie.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="savebtn">存储</button>
<button id="getbtn">获取</button>
<button id="delbtn">删除</button>
<script>
// http协议无状态
//localStorage：用户名密码 token钥匙 ==》Nodejs token认证
//cookie 本地存储 sessionID钥匙==》Nodejs cookie+session
//
savebtn.onclick=function(){
//过期时间设置
var date=new Date()//UTC时间-8小时
date.setMinutes(date.getMinutes()+15)
document.cookie=`user=Tom;expires=${date.toUTCString()}`
document.cookie=`username=test;path=/vscode/1;expires=${date.toUTCString()}`
document.cookie=`age=10;expires=${date.toUTCString()}`
}
getbtn.onclick=function(){
console.log(getCookie("age"))
// getCookie()
}
function getCookie(key){
var str=document.cookie
var arr=str.split("; ")
console.log(arr)
var obj={}
for(var i=0;i<arr.length;i++){
var subArr=arr[i].split("=")
console.log(subArr)
console.log(subArr[0])
obj[subArr[0]]=subArr[1]
}
return obj[key]
}
//修改cookie即是同名覆盖
//删除cookie（重新设置删除时间）
delbtn.onclick=function(){
var date=new Date()//UTC时间-8小时
date.setMinutes(date.getMinutes()-1)
document.cookie=`user=123;expires=${date.toUTCString()}`
document.cookie=`age=123;expires=${date.toUTCString()}`
document.cookie=`username=123;expires=${date.toUTCString()}`
}
</script>
</body>
</html>jsonp
jsonp(JSON with Padding)是json的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
同源策略：同域名，同端口号，同协议
不符合同源策略，浏览器为了安全，会阻止请求
解决方案：
1.cors 由后端设置：Access-Control-Allow-Origin:*
2. jsonp :前后端协作
jsonp原理：动态创建script标签，src属性指向没有跨域限制
指向一个接口，接口返回的格式一定是***（）函数表达式
<!--
* @Date: 2023-03-21 10:13:05
* @LastEditors: Mei
* @LastEditTime: 2023-03-21 10:42:56
* @FilePath: \vscode\jsonp.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!--
* @Date: 2023-03-21 10:13:05
* @LastEditors: Mei
* @LastEditTime: 2023-03-21 10:36:32
* @FilePath: \vscode\jsonp.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="mybtn">
jsonp
</button>
<script>
// fetch("")
// .then(res=>res.json())
// .then(res=>{
// console.log(res)
// })
function test(obj){
console.log(obj)
}
// test({name:"mez"})
// var oscript
mybtn.onclick=function(){
var oscript=document.createElement("script")
oscript.src="01.txt" //未来地址
document.body.appendChild(oscript)
}
</script>
<!-- <script src="01.js">
// test({name:"mez"})
</script> -->
</body>
</html>
