document.cookie

Resumen

Con document.cookie se obtienen y definen las cookies asociadas con el documento.

Sintaxis

Leer todas las cookies accesibles desde una localizaci贸n

todasLasCookies = document.cookie;

En el c贸digo anterior todasLasCookies es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares clave=valor). Tenga en cuenta que clave y valor pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulaci贸n): de hecho RFC 6265 especifica que debe haber un espacio en blanco despu茅s de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.

document.cookie = nuevaCookie;

En el c贸digo anterior, nuevacookie es una cadena de la forma clave=valor. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este m茅todo. Considere tambi茅n que:

  • Cualquiera de los siguientes atributos opcionales se puede escribir despu茅s del par clave-valor, especificando la cookie que se va a crear o actualizar, precedidos de un punto y coma.
    • ;path=path (p. ej.: '/'. '/midir'). Si no se especifica, por defecto corresponde a la ruta del documento actual.
      La ruta debe ser absoluta (ver RFC 6265). Para m谩s informaci贸n sobre c贸mo utilizar rutas relativas, ir a este p谩rrafo.
    • ;domain=domain (p. ej. 'example.com', 'subdomain.example.com'). Si no se especifica, su valor por defecto es la porci贸n de la direcci贸n web de la ubicaci贸n actual del archivo. A diferencia de lo que ocurr铆a en las primeras especificaciones, los puntos iniciales de los nombre de dominio se ignoran, pero los navegadores pueden impedir crear cookies que contengan dichos puntos. Si se especifica un dominio, los subdominios siempre son incluidos.
    • ;max-age=duraci贸n-m谩xima-en-segundos Por ejemplo: 60*60*24*365 para un a帽o.
    • ;expires=fecha-en-formato-GMTString Si no se especifica max-age ni expires, la cookie expirar谩 al terminar la sesi贸n actual.
    • ;secure La cookie s贸lo ser谩 transmitida en un protocolo seguro (HTTPS, SSL). Antes de Chrmoe 52, este atributo pod铆a aparecer con cookes de dominios http.
    • ;samesite Este atributo impide al navegador enviar esta cookie a trav茅s de peticiones cross-site. Los valores posibles son lax o strict. El soporte de este atributo se a帽adi贸 en Chrome 51.
      • El valor strict impide que la cookie sea enviada por el navegador al sitio destino en contexto de navegador cross-site, incluso cuando sigue un enlace regular.
      • El valor lax s贸lo env铆a cookies a las peticiones de GET de ALTO NIVEL. Es suficiente para seguir al usuario, pero evitar谩 muchos ataques CSRF.
  • El valor de la cookie puede ser evaluado mediante encodeURIComponent() para asegurarse de que dicha cadena no incluya comas, punto y coma, ni espacios en blanco (lo cual no est谩 permitido en el valor de una cookie).
  • Algunas implementaciones de agente de usuario soporta los siguientes prefijos de cookie:
    • __Secure-  Se帽ales para el navegador que solo deben incluirse en las perticiones de cookie transmitidas por un canal seguro.
    • __Host- Se帽ales del navegador que adem谩s de la restricci贸n de uso de cookies que provienen de un origen serugo, el 谩mbito de la cookie est谩 limitado a un atributo path que proporciona el servidor. Si el servidor omite el atributo path, el directorio de las petici贸n URI est谩 en uso. Tabi茅n las se帽ales del atributo dominio no deben estar presentes, lo cual previene que la cookie sea usada en otros dominis. Para Chrome, el atributo path debe tener el mismo origen.
Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)
N贸tese que previamente a Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), rutas que conten铆an comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.

Ejemplos

Ejemplo # 1: Uso sencillo

document.cookie = "nombre=oeschger";
document.cookie = "comida_preferida=tripa";
function alertCookie() {
  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa

}
<button onclick="alertCookie()">Mostrar cookies</button>

document.cookie = "test1=Hola";
document.cookie = "test2=Mundo";

var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

function alertCookieValue() {
  alert(cookieValor);
}
<button onclick="alertCookieValue()">Mostrar valor de cookie</button>

Ejemplo #3: Hacer algo una sola vez

De manera a usar el siguiente c贸digo, favor remplace todas las veces la palabra hacerAlgoUnaSolaVez (el nombre de la cookie) con un nombre personalizado.

function hazUnaVez() {
  if (document.cookie.replace(/(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
    alert("Hacer algo aqu铆!");
    document.cookie = "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
  }
}
<button onclick="dhacerUnaVez()">Solo hacer algo una vez</button>

Seguridad

Es importante mencionar que la restricci贸n path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser f谩cilmente resuelto mediante DOM (por ejemplo creando un iframe oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La 煤nica manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la pol铆tica de mismo origen.

Notas

  • Empezando con Firefox 2, est谩 disponible un mejor mecanismo de almacenamiento en cliente - WHATWG DOM Storage.
  • Puedes eliminar una cookie simplemente estableciendo su fecha de expiraci贸n a cero.
  • Cabe mencionar que entre m谩s cookies se tengan, mayor cantidad de datos ser谩n transferidos entre el servidor y el cliente en cada solicitud. Esto reducir谩 el tiempo entre cada solicitud. Es altamente recomendado que se utilice WHATWG DOM Storage si se van a mantener los datos solamente en el cliente.

Especificaci贸n