网页数据cookie详解与应用场景
cookie 临时存储
ookie 是本地计算机的临时存储，实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。
一般我们用于页面保存信息，比如：用户名和自动登录密码等
cookie作用
cookie的功能: 在浏览器中进行数据的存储,用户名、密码
cookie的主要作用是保存信息，并与服务器互动，因此在很多情况下都可以使用到cookie。
密码 cookie：访当问者首次访问页面时，也许会填写密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。
cookie特性
注意：
当我们打开一个网页时，该网页会在我们本地cookie中获取到对应的cookie数据，这个cookie数据是我们上次登录时，所输入的用户名和密码储存在了本地cookie中，当我们在次打开这个网页时，cookie数据会自动随着网页的打开发送到服务器，服务器会按照cookie数据返回对应的内容
Cookie不单单用于用户名和密码，我们平时所浏览的数据关键词也会被记录，后面刷新和打开时，服务器就会根据你浏览的信息关键词推送消息。
cookie必须运行在服务器的环境下（开启服务器）
cookie的容量: 5k，但是这个是针对当前文件夹路径的存储，子文件夹将会有新的存储空间
cookie存储的数据类型: 字符串
cookie存放以域名形式区分的，不同域名的存储是无法共享的 一般有50条
一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。如果想长时间存放一个cookie，同时需要设置一个过期时间如何清除过期时间？只需要将cookie存储重新设置不加过期时间，就可以完成清除过期时间
Cookie默认是临时存储的，当浏览器关闭时，自动销毁如果浏览器中设置了不存储cookie或者手动清除cookie，以上内容都会丢失
cookie的缺点
cookie存在着泄露隐私和账户密码的风险
cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。
Cookie的创建与写法
Cookie默认是临时存储的，当浏览器关闭时，自动销毁
在JavaScript中，可以通过cookie名和值的方式来创建cookie。
一个网站可以创建多个cookie，不同的cookie可以拥有不同的值。
例如将用户名和密码存在cookie中，那么就有可能用到两个cookie：一个cookie用于存放用户名，另一个cookie用于存放密码。
使用Document对象的cookie属性可以用来设置与读取cookie
创建：
直接写在js内document.cookie = “username=value”;
写法示例：
// 因为cookie在浏览器彻底关闭时，cookie会被清空，所以这里可以设置到期时间
var date=new Date();
date.setFullYear(2022);
// 临时写法
document.cookie="a=3";
// 因为cookie在浏览器彻底关闭时，cookie会被清空，所以这里可以设置到期时间（固定格式）
document.cookie="a=3;expires="+date.toUTCString();
// 获取cookie的值
console.log(document.cookie);
var a=Number(document.cookie.split("=")[1]);
a++;
// 因为每次执行这里都会覆盖原先的cookie设置，所以为了在有限期内cookie一直存在
// 需要在这里也加上date.toUTCString()固定格式，来保证有限期不被从新设置去掉
document.cookie="a="+a+";expires="+date.toUTCString();提示：写好cookie之后打开执行一下页面，这个cookie就已经被储存到本机内了，如果未设置到期日期时，在不完全关闭浏览器的情况下cookie会一直存在，设置到期日期时，cookie会一直到到期日期后在消除
注意：
cookie临时存储在本机
cookie只能再页面通过服务打开的情况下才可以使用，ajax也是
双击打开页面是无法使用的
如何多个内容存储
储存多个时，需要用到对象进行出储存
// 如何多个内容存储
var obj={
user:"xietian",
age:30,
sex:"男"
}
// date为设置到期时间预留的
function setCookie(obj,date){
// 通过循环把对象内的值取出
for(var prop in obj){
document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");
}
}
// 直接使用key和value获取到对象内的数据
function setCookie1(key,value,date){
document.cookie=key+"="+value+(date ? ";expires="+date.toUTCString() : "");
}
var date=new Date();
date.setFullYear(2022);
setCookie(obj,date);上面是将多个值用对象的形式设置在cookie中，那么我们如何把cookie中的数据取出呢！
// 获取cookie值
// console.log(document.cookie)
var o=getCookie();
console.log(o);
function getCookie(){
// 先设置一个对象用来储存从cookie中取出的数据
var obj={};
console.log(document.cookie)
// 将cookie的数据在 ；处分开得到数组
var arr=document.cookie.split("; ");
// 循环数组
for(var i=0;i<arr.length;i++){
var str=arr[i];
// 将数组的每一项再在=处分开
var arr1=str.split("=");
// 获得键名
var key=arr1[0];
// 获得键值
var value=arr1[1];
console.log(arr1,key,value);
// 添加给对象
obj[key]=value;
}
return obj;
}reduce 归并形式获取到cookie数据
// reduce 归并
var o=getCookie();
console.log(o);
function getCookie(){
return document.cookie.split("; ").reduce((value,item)=>{
var arr=item.split("=");
// 因为有的键值是数值，所以要进行判断
value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
return value;
},{});
}