Establecer cookies en JavaScript

1. Establecer cookies en JavaScript
2. Establecer una fecha de caducidad para una cookie
3. Establecer una ruta para una cookie
4. la función setCookie()

Una cookie es una pieza de información que permite una conexión entre los lados del cliente y del servidor. El navegador web lo almacena en el momento de la navegación.

Generalmente, una cookie contiene datos en el formato de un par nombre-valor separados por punto y coma como una cadena. Además, una cookie mantiene el estado del usuario y recopila la información del usuario en todas las páginas web.

Al considerar JavaScript, una cookie se puede crear, leer, actualizar y eliminar utilizando la propiedad document.cookie. Una cookie consta de seis segmentos: nombre, valor, caduca, ruta, dominio y seguridad, según la sintaxis siguiente.

Sintaxis:

document.cookie = 'name=VALUE; expires=DATE; path=PATH; domain=DOMAIN; secure';

Aquí, la presencia del primer segmento: nombre=VALOR, es esencial, y los demás segmentos pueden ser proporcionados por el usuario si es necesario, según el requerimiento.

Establecer cookies en JavaScript

document.cookie = 'new_cookie'

Primero, considere cada segmento en detalle como una puesta en marcha con la sintaxis anterior.

1. El comando document.cookie crea una nueva cookie.
2. Aquí, la nueva_cookie es la cadena que establece el valor de la cookie y tiene su sintaxis como nombre=VALOR, donde nombre debería implicar lo que la cookie debería almacenar en un formato legible, y VALOR es simplemente el valor dado por el usuario como preferido.

Un ejemplo para establecer una cookie:

document.cookie = 'username=John Ricks';

Aquí la cookie se almacena con nombre de usuario como nombre y el valor John Ricks.

Producción:

Establecer una fecha de caducidad para una cookie

Una cookie caduca automáticamente en función de la fecha de caducidad del usuario establecida en el código. Si no se establece una fecha de caducidad, la cookie se eliminará cuando el usuario cierre el navegador, impidiendo que el usuario reutilice los valores de la cookie cuando visite las páginas web.

Podemos anular este problema estableciendo una fecha de caducidad para la cookie simplemente añadiendo expires=DATE en UTC (Universal Time Coordinated), un estándar de tiempo separado por un punto y coma, como en el siguiente ejemplo.

document.cookie = 'username=John Ricks; expires=Wed, 31 Aug 2022 21:00:00 UTC';

Producción:

Establecer una ruta para una cookie

Con el parámetro ruta, el usuario puede indicar al navegador a qué ruta pertenece la cookie en el directorio o página web. Por defecto, la cookie pertenece a la página actual a la que accede el usuario.

Esta ruta puede quedar en blanco una vez que obtengamos la cookie de cualquier directorio o página web. Este parámetro modifica dónde se almacena la cookie en la máquina del usuario y es beneficioso cuando se almacena información confidencial, ya que es difícil de encontrar.

Podemos agregar la ruta a una cookie, como en el siguiente código.

document.cookie =
    'username=John Ricks; expires=Wed, 31 Aug 2022 21:00:00 UTC; path=/'

Producción:

Además, dependiendo de la necesidad, se puede agregar un dominio y seguridad al configurar una cookie. El propósito de agregar un dominio es permitir cookies a otros subdominios.

La parte segura es un valor booleano donde el valor predeterminado es false, un campo en blanco. Si la cookie está marcada como segura, el valor es “true”, por lo que la cookie se enviará a un servidor web y solo se podrá recuperar con un canal de comunicación seguro.

la función setCookie()

Podemos establecer los valores de las cookies mediante una función de JavaScript sin codificar los valores de las cookies, lo que puede tener una utilidad limitada en la mayoría de las ocasiones. El siguiente código define la función setCookie().

let username = 'John Ricks';

// To set a cookie
function setCookie(cookie_name, cookie_value, expire_date) {
  const c_d = new Date();  // current date
  c_d.setTime(c_d.getTime() + (expire_date * 24 * 60 * 60 * 1000));
  let expires = 'expires=' + c_d.toUTCString();
  document.cookie =
      cookie_name + '=' + cookie_value + '; ' + expires + '; path=/';
}
// to apply setCookie
setCookie('username', username, 20);

Producción:

Esta función creará una cookie con el nombre username y el valor de John Ricks y una fecha de caducidad de 20 días desde que la generamos.

Del mismo modo, podemos usar funciones de JavaScript para obtener una cookie mediante la creación de una función getCookie(), y las cookies también se pueden actualizar o eliminar si es necesario.