JavaScript Cookies

Cookie 让您在网页中存储用户信息。

什么是 cookie？

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

  • 当用户访问网页时，他的名字可以存储在 cookie 中。
  • 下次用户访问该页面时，cookie 会“记住”他的名字。

Cookie 保存在名称值对中，如：

username = Bill Gates

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持，则以下实例均无法工作。

通过 JavaScript 创建 cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

A través de ruta Parámetros, puede informar al navegador qué ruta pertenece al cookie. Por defecto, el cookie pertenece a la página actual.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Leer cookie mediante JavaScript

Puede leer cookie de la siguiente manera mediante JavaScript:

var x = document.cookie;

document.cookie Devolverá todos los cookie en una sola cadena, por ejemplo: cookie1=value; cookie2=value; cookie3=value;

Cambiar cookie mediante JavaScript

Al usar JavaScript, puede cambiarlo de la misma manera que lo creó:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

El cookie antiguo es cubierto.

Eliminar cookie mediante JavaScript

Eliminar cookie es muy simple.

No es necesario especificar el valor del cookie al eliminar cookie:

Directamente expires Configure los parámetros a una fecha pasada:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Debería definir la ruta del cookie para asegurar que se elimine el cookie correcto.

Algunos navegadores no le permiten eliminar cookie si no especifica la ruta.

Cadena de Cookie

document.cookie El atributo parece una cadena de texto normal. Pero no es así.

Incluso si se le document.cookie Escriba una cadena de cookie completa, cuando la lea de nuevo, solo verá su par de nombre-valor.

Si se establece un nuevo cookie, el cookie antiguo no será cubierto. El nuevo Cookie se añadirá a document.cookie, por lo que si lee document.cookie, lo que obtiene será así:

cookie1 = value; cookie2 = value;
　 　 　

Si quieres encontrar el valor de un cookie específico, debes escribir una función de JavaScript para buscar el valor del cookie en la cadena de cookie.

Ejemplo de JavaScript Cookie

En el siguiente ejemplo, crearemos un cookie para almacenar el nombre del visitante.

Cuando el visitante llega por primera vez a la página web, se le pedirá que ingrese su nombre. Luego, almacenamos ese nombre en el cookie.

Cuando el visitante vuelva a la misma página, recibirá un mensaje de bienvenida.

Por ejemplo, crearemos 3 funciones de JavaScript:

  1. Función para configurar el valor del cookie
  2. Función para obtener el valor del cookie
  3. Función para verificar el valor del cookie

Función para configurar el cookie

Primero, creamos una función que almacena el nombre del visitante en la variable de cookie:

ejemplo

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Explicación del ejemplo:

Los parámetros de esta función son: el nombre del cookie (cname), el valor del cookie (cvalue) y el número de días que el cookie expira (exdays).

Esta función configura el cookie al sumar el nombre del cookie, el valor del cookie y la cadena de expiración.

Función para obtener el cookie

Luego, creamos una función que devuelve el valor del cookie especificado:

ejemplo

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

Explicación de la función:

Usa la cookie como parámetro (cname).

Crea una variable (name) y el texto a buscar (CNAME"=").

Decodifica la cadena de cookie, procesa la cookie con caracteres especiales, como "$".

utilizar punto y coma para dividir document.cookie en un array llamado ca (decodedCookie.split(';')).

recorrer el array ca (i = 0; i < ca.length; i++), luego leer cada valor c = ca[i].

si se encuentra el cookie (c.indexOf(name) == 0), se regresará el valor del cookie (c.substring(name.length, c.length)).

si no se encuentra el cookie, se regresará "".

función para detectar cookie

Por último, creamos una función para verificar si el cookie está configurado.

si se ha configurado el cookie, se mostrará un saludo.

si no se ha configurado el cookie, se mostrará una ventana emergente que preguntará por el nombre del usuario, y se almacenará el cookie de nombre durante 365 días, llamando a setCookie función:

ejemplo

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Bienvenido de nuevo " + username);
    }
        username = prompt("Por favor, ingrese su nombre:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

ahora los combinamos

ejemplo

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    por(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Bienvenido de nuevo " + user);
    }
        user = prompt("Por favor, introduce tu nombre:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

Prueba por tu cuenta

El ejemplo anterior se ejecutará la función checkCookie() después de que la página se cargue.