Breve explicación de las cookies

El significado de las cookies

• Supongamos que después de iniciar sesión, se guarda un fragmento de información en mi cookie. El tiempo de caducidad de esta información es de 7 días.
  • No importa si cierro el navegador o no, mientras no borre el caché, la cookie siempre estará ahí.
  • Caduca en 7 días
• Cuando me conecto:
  • Primero, permítame verificar si hay alguna información que guardé en la cookie.
  • Si lo hay, siga directamente el inicio de sesión para completar el procesamiento
  • De lo contrario, se tratará como no iniciado sesión.
• Siempre que inicie sesión una vez:
  • Esta información de inicio de sesión se puede guardar en 7 días
  • No es necesario iniciar sesión nuevamente dentro de los 7 días, cada vez que abra el sitio web, se procesará de acuerdo con la finalización del inicio de sesión.
  • Después de 7 días, debe iniciar sesión nuevamente
  • Eso es para darse cuenta de la función de inicio de sesión de 7 días

Que es una cookie

• cookieEs una ubicación donde los datos se almacenan en forma de cadena.
• Cada solicitud HTTP llevará la cookie en el encabezado de la solicitud al servidor.
• Cada respuesta HTTP llevará una cookie en el encabezado de respuesta al cliente.
• En otras palabras, la cookie no necesita ser configurada manualmente por nosotros, automáticamente moverá datos entre el cliente y el servidor.
• Solo necesitamos configurar el contenido de la cookie.

Forma de almacenamiento de cookies

• La cookie se almacena en key=valueforma de cadena y aparece en la cadena en forma de
• Cada uno key=valuees un dato
• ;Dividir entre varios datos

// cookie的形态
`a=100; b=200; c=300;`

Características de las cookies

• Almacenado por nombre de dominio: es decir, quien lo establece puede leerlo
• Puntualidad: es decir, hay un tiempo de caducidad,
  1. El valor predeterminado es el nivel de sesión (es decir, caduca cuando se cierra el navegador)
  2. Puede configurarse manualmente
• El tamaño de almacenamiento es limitado: generalmente 4kb o alrededor de 50
• Se pueden operar tanto los extremos delantero como trasero:
  1. Operación de front-end a través de js
  2. El backend opera a través del lenguaje de backend
• Solicitar transporte automático:
  1. Cuando hay contenido en su espacio de cookies
  2. Siempre que sea una solicitud bajo el nombre de dominio actual, automáticamente llevará la cookie y la colocará en el encabezado de la solicitud.
  3. Cuánto se transporta automáticamente en la cookie
  4. Si no hay contenido en la cookie, no se llevará

Cookie de operación JS

Agregar cookie

• gramática:document.cookie = "key=value";
• Nota: Solo puede configurar una cookie a la vez, si desea configurar dos, debe escribir dos veces
• Puntualidad en la instalación de cookies
  • Cuando no se establece, el valor predeterminado es la caducidad de la sesión (desaparece después de cerrar el navegador)
  • Establecer la puntualidad de la cookie es modificar la cookie
    • document.cookie = "key=value; 修饰信息1=修饰的值1;修饰信息2=修饰的值2"
    • Establecer tiempo de vencimiento:document.cookie = "key=value; expires = 时间对象"
    • Establecer una ruta válida: document.cookie = "key=value; path=路径"(si la ruta no está configurada, la ruta predeterminada es la ruta del directorio actual)
• Momento de instalación de cookies
  • Lo que obtenemos usando new Date () es la hora de nuestro terminal, que es la hora en la zona horaria +8
  • Supongamos que obtenemos 9:30 con una nueva fecha ()
  • Pero el tiempo de esta cookie en nuestro terminal es 17 :: 30
  • Si desea que la cookie caduque a la hora actual
  • Entonces el tiempo terminal que obtienes es -8 horas.

// 增加一条cookie
document.cookie = 'a=100';

// 再增加一条cookie
document.cookie = 'b=hello';

// 设置有过期时间的cookie
var date = new Date('2022/2/12');
document.cookie = "c=200; expires="+date;

// 设置cookie的path
document.cookie = "d=300;path=/";

// 设置一个cookie在5秒后过期
var date1 = new Date();
// 把当前时间往前推8个小时消失，在增加5秒时间
date1.setTime(date1.getTime()-8*60*60*1000+5*1000);
document.cookie = "e=200;expires="+date1;

// 设置一个有过期时间的cookie
document.cookie = 'f=100; expires=Thu,18 Dec 2043 12:00:00 GMT';// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失

// 获取cookie
console.log(document.cookie);

Eliminar cookie

• Las cookies no se pueden borrar
• Si ya no quieres esta galleta
• Luego, establezca la hora de vencimiento de esta cookie antes de la hora actual, luego elimine

// 先设置一条cookie
document.cookie = "name=zhangsan";
// 在删除这条cookie
var date = new Date();
date.setTime(date.getTime()-8*60*60*1000-1);
document.cookie = "name=zhangsan;path=/;expires="+date;

Obtener cookie

• js obtiene la cookie:document.cookie
• No puede obtener un solo dato, solo puede obtener todas las cookies

document.cookie = "aa=100";
document.cookie = "bbb=200";
document.cookie = "c=300";
document.cookie = "ac=60";
console.log(document.cookie);

var key = "ac";
var result;	//结果保存在这个变量里面
var str = document.cookie;	//"a=500; aa=100; bbb=200; c=300; ac=60"

//先把字符串以“; ”为分隔符，变成一个数组:['a=500','aa=100','bbb=200','c=300','ac=60']
var arr = str.split("; ");

// 遍历数组arr，看数组里面每一项
for(var i=0; i<arr.length; i++){
    
    
	// arr[0] = "a=500"
	// 把arr[i]以=为分隔符，前面是key，后面是value
	var tempArr = arr[i].split("=");//['a','500']
	if(tempArr[0]==key){
    
    
		// 如果这一项=前面的内容和key相同，=后面的值就是我们要的值，循环结束
		result = tempArr[1];
		break;
	}
	// 如果这一项的=前面的内容和key不相同，=后面的值就不是我们要的值，继续下一次
}
console.log(result);

Paquete de cookies de operación JS

• Porque no existe un método especial para agregar, eliminar, verificar y modificar cookies en js
• Entonces, necesitamos encapsular un método nosotros mismos

Establecer cookie

/**
 * setCookie 用于设置 cookie
 * @param {STRING} key  要设置的 cookie 名称
 * @param {STRING} value  要设置的 cookie 内容
 * @param {NUMBER} expires  过期时间
 */
function setCookie(key, value, expires){
    
    
	const time = new Date();
	time.setTime(time.getTime()-1000*60*60*24*8+expires);
	document.cookie = `${
      
      key}= ${
      
      value}; expires=${
      
      time}`;
}

Eliminar cookie

/**
 * delCookie 删除 cookie 中的某一个属性
 * @param {STRING} name 你要删除的某一个 cookie 属性的名称
 */
function delCookie(name){
    
    
	setCookie(name,1,-1);
}

Obtener cookie

/**
 * getCookie 获取 cookie 中的某一个属性
 * @param {STRING} key 你要查询的 cookie 属性
 * @return {STRING} 你要查询的那个 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 de manipulación de PHP

Agregar cookie

• gramática:setcookie(key,value,过期时间);
  • clave: el nombre de la cookie que se va a configurar
  • valor: el valor de la cookie que se va a configurar
  • Tiempo de vencimiento: no se puede escribir, el valor predeterminado es el límite de tiempo de la sesión.
• El backend obtiene el objeto time usando el método time ()
  • Lo que obtienes es la hora estándar mundial en segundos.
  • 15 segundos después de la hora actual: hora () + 15
  • setcookie('php','200',time()+15);

Modificar cookie

• Cookie de modificación de backend
  • También usa el método setcookie
  • Solo configúralo de nuevo
  • setcookie('a',100);
  • setcookie('a',200);

Eliminar cookie

• Eliminar cookies en el backend
  • También usa el método setcookie
  • Es solo que la hora de caducidad de la cookie se establece antes de la hora actual
  • setcookie('a','hello',time()-1);

Obtener cookie

• Obtener cookies del backend
  • Cuando la interfaz envía una solicitud, la cookie se transportará en el encabezado de la solicitud
  • PHP tiene una variable predefinida llamada$_COOKIE
  • Es una matriz asociativa, similar a$_GET/$_POST
  • En él se almacena la información de las cookies una por una.
  • Cuál quieres, solo $_COOKIEsácalo

Demostración de código

<?php
// 设置cookie,15秒后过期
setcookie('php',200,time()+15);

// 修改cookie,过期时间不写相当于改回默认过期时间
setcookie('php',100);

// 获取cookie
$php = $_COOKIE['php']; //$php=100

// 删除cookie
setcookie('php',100,time()-1);
?>