网页数据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;            
	},{});        
}