¿Cómo crear y leer el valor de la cookie?

Los servidores web alojan el sitio web. El cliente-servidor realiza una solicitud de datos del servidor web y el servidor web obtiene las páginas requeridas y responde al cliente enviándole las páginas solicitadas. El servidor web se comunica con el cliente-servidor mediante HTTP (Protocolo de transferencia de hipertexto). HTTP es un protocolo sin estado, lo que significa que el servidor no necesita retener la información del usuario una vez que finaliza la transacción y se cierra la conexión. El navegador web es un ejemplo de cliente-servidor que se comunica con el servidor web mediante HTTP. HTTP evita la participación prolongada del cliente con el servidor web y la conexión se cierra automáticamente una vez que se atiende la solicitud. Pero a menudo se requiere almacenar la información del usuario para futuras referencias. Uno de los usos más comunes de las cookies es para la autenticación. Las cookies sirven para retener la información del usuario incluso cuando se pierde la conexión. Las cookies son datos, almacenados en archivos de texto, en la computadora.

Las cookies se componen de cinco campos variables:

• Caduca: especifica cuándo caducará la cookie. Si se deja vacía, la cookie caduca inmediatamente cuando se pierde la conexión.
• Dominio: especifica el nombre de dominio del sitio web.
• Nombre=Valor: Las cookies se almacenan en forma de pares nombre-valor.
• Ruta: especifica la página web o el directorio que establece la cookie.
• Seguro: especifica si la cookie puede ser recuperada por cualquier servidor (seguro o no seguro).

Sin embargo, las cookies pueden almacenar solo una pequeña cantidad de datos como ID de usuario o ID de sesión . Borrar las cookies cerrará la sesión del usuario de todos los sitios en los que haya iniciado sesión. HTTP se puede hacer con estado mediante el uso de cookies. Las aplicaciones web con estado almacenan la información de las requests anteriores y pueden usarla para atender requests futuras.

Principio de funcionamiento: cuando el cliente o el navegador web establece una conexión con el servidor web, el servidor web envía algunos datos al navegador en forma de cookie. El navegador puede aceptar o rechazar la cookie. Si el navegador lo acepta, la cookie se almacena en el disco duro del dispositivo cliente. Los scripts CGI en el servidor pueden leer y escribir valores de cookies que se almacenan en el cliente, por lo que cuando el cliente visita el mismo sitio web nuevamente, recupera los datos de cookies del navegador. Se puede utilizar JavaScript para manipular las cookies mediante la propiedad de cookies del objeto Documento. JavaScript puede leer, crear, modificar y eliminar las cookies de la página web actual. El siguiente código demuestra cómo se puede usar JavaScript para crear y leer un valor de la cookie.

Crear cookie usando JavaScript: esta función crea una cookie usando el nombre del campo, el valor del campo y la fecha de vencimiento. La ruta se deja en blanco para que se aplique a la página web actual. Sin embargo, podemos especificar cualquier otra página web o nombre de directorio.

Programa:

function createCookie(fieldname, fieldvalue, expiry) {
    var date = new Date();
    date.setTime(date.getTime()+ (expiry*24*60*60*1000));
    var expires = "expires=" + date.toGMTString();
    document.cookie = fieldname + "=" + fieldvalue + 
                      ";" + expires + ";path=/";
}

Leer cookie usando JavaScript: esta función recupera los datos de cookies almacenados en el navegador. La string de cookies se codifica automáticamente mientras se envía desde el servidor al navegador. Por lo tanto, debe decodificarse antes de que se puedan recuperar los datos reales. A continuación, la string decodificada se divide en una array para obtener todos los pares de nombre y valor de la cookie. Recorra la array para encontrar el nombre de campo y los valores de campo respectivos. Si se encuentra la cookie, se devuelve el valor; de lo contrario, la función devuelve la string vacía.

Programa:

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

Cree y lea cookies usando JavaScript: cuando se carga la página web , se llama a la función runApp() y verifica si existe una cookie en el navegador, se recupera; de lo contrario, se crea una nueva cookie para la misma.

Programa:

<!DOCTYPE html>
<html>
<head>
    <title>
        Create and read cookies
        using JavaScript
    </title>
      
    <script type="text/javascript">
        function createCookie(fieldname, fieldvalue, expiry) {
            var date = new Date();
            date.setTime(date.getTime()+ (expiry*24*60*60*1000));
            var expires = "expires=" + date.toGMTString();
            document.cookie = fieldname + "=" + fieldvalue
                            + ";" + expires + ";path=/";
        }
  
  
        function readCookie(cname) {
            var name = cname + "=";
            var decoded_cookie = 
                decodeURIComponent(document.cookie);
            var carr = decoded_cookie.split(';');
            for(var i=0; i<carr.length;i++){
                var c = carr[i];
                while(c.charAt(0)==' '){
                    c=c.substring(1);
                }
                if(c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }
  
  
        function runApp() {
            var user = readCookie("username");
            if(user != ""){
                alert("Hello "+user);
            }else{
                user=prompt("Enter your name: ", "");
                if(user!= "" && user!=null){
                    createCookie("username", user, 30);
                }
            }
        }
  
    </script>
</head>
<body onload="runApp()"></body>
</html>

Producción:

• Creación de cookies:
  
• Galleta de lectura: