¿Cómo configuro / deshabilito una cookie con jQuery?

1244

¿Cómo configuro y desarmo una cookie usando jQuery, por ejemplo, crear una cookie con nombre testy establecer el valor 1?

Dios mio
fuente

Respuestas:

1767

Actualización de abril de 2019

jQuery no es necesario para la lectura / manipulación de cookies, así que no use la respuesta original a continuación.

Vaya a https://github.com/js-cookie/js-cookie en su lugar, y use la biblioteca allí que no depende de jQuery.

Ejemplos básicos:

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

Vea los documentos en github para más detalles.


Ver el complemento:

https://github.com/carhartl/jquery-cookie

Entonces puedes hacer:

$.cookie("test", 1);

Borrar:

$.removeCookie("test");

Además, para establecer un tiempo de espera de un cierto número de días (10 aquí) en la cookie:

$.cookie("test", 1, { expires : 10 });

Si se omite la opción de caducidad, la cookie se convierte en una cookie de sesión y se elimina cuando se cierra el navegador.

Para cubrir todas las opciones:

$.cookie("test", 1, {
   expires : 10,           // Expires in 10 days

   path    : '/',          // The value of the path attribute of the cookie
                           // (Default: path of page that created the cookie).

   domain  : 'jquery.com', // The value of the domain attribute of the cookie
                           // (Default: domain of page that created the cookie).

   secure  : true          // If set to true the secure attribute of the cookie
                           // will be set and the cookie transmission will
                           // require a secure protocol (defaults to false).
});

Para volver a leer el valor de la cookie:

var cookieValue = $.cookie("test");

Es posible que desee especificar el parámetro de ruta si la cookie se creó en una ruta diferente a la actual:

var cookieValue = $.cookie("test", { path: '/foo' });

ACTUALIZACIÓN (abril de 2015):

Como se indica en los comentarios a continuación, el equipo que trabajó en el complemento original ha eliminado la dependencia de jQuery en un nuevo proyecto ( https://github.com/js-cookie/js-cookie ) que tiene la misma funcionalidad y sintaxis general que La versión jQuery. Aparentemente, el complemento original no va a ninguna parte.

Alistair Evans
fuente
1
del registro de cambios: "$ .removeCookie ('foo') para eliminar una cookie, usando $ .cookie ('foo', null) ahora está en desuso"
bogdan
68
@Kazar Pasé 6 horas, sin descansos. Finalmente me di cuenta del problema esta mañana. Estoy usando esto con phonegap, en el sitio funciona sin problemas, pero en el dispositivo, cuando intentas recuperar la cookie que tiene un JSON, ya es un objeto, por lo que si intentas JSON. dará un error de análisis JSON. Lo resolvió con un "if typeof x == 'string'" haciendo JSON.parse, de lo contrario, solo use el objeto. 6 malditas horas buscando el error en todos los lugares equivocados
Andrei Cristian Prodan
10
al eliminar la cookie, asegúrese de establecer también la ruta en la misma ruta que la cookie original:$.removeCookie('nameofcookie', { path: '/' });
LessQuesar
30
Es 2015 y todavía recibimos más de 2k visitas únicas por semana en el repositorio jquery-cookie solo de esta respuesta. Un par de cosas que podemos aprender de eso: 1. las cookies no van a morir pronto y 2. La gente todavía busca en Google un "complemento jquery para salvar el mundo". jQuery NO es necesario para manejar cookies, jquery-cookie se renombra a js-cookie ( github.com/js-cookie/js-cookie ) y la dependencia de jquery se hizo opcional en la versión 1.5.0. Habrá una versión 2.0.0 con muchas cosas interesantes, vale la pena echar un vistazo y contribuir, gracias!
Fagner Brack
2
@Kazar No estamos planeando moverlo físicamente, hay una cantidad considerable de tráfico general a esa URL desde varias fuentes y Klaus es el propietario histórico del espacio de nombres "jquery-cookie". No hay que preocuparse por que esa URL desaparezca pronto. Pero aún así, animaría a todos a comenzar a ver las actualizaciones en el nuevo repositorio.
Fagner Brack
429

No es necesario usar jQuery, especialmente para manipular cookies.

De QuirksMode (incluidos los caracteres de escape)

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

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

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Echa un vistazo a

Russ Cam
fuente
2
Hola Russ, lo bueno de jquery cookie es que se escapa de los datos
Svetoslav Marinov
2
@lordspace - Simplemente ajuste el valor en window.escape / unescape para escribir / recuperar el valor de la cookie, respectivamente :)
Russ Cam
46
Puede encontrar un mejor código de cookies aquí: developer.mozilla.org/en/DOM/document.cookie
SDC
3
el plugin de galletas jQuery es mucho más simple
brauliobo
1
en lugar de escapar o escapar puede usar encodeURI o decodeURI
Moldovan
143
<script type="text/javascript">
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }

    function eraseCookie(key) {
        var keyValue = getCookie(key);
        setCookie(key, keyValue, '-1');
    }

</script>

Puedes configurar las cookies como

setCookie('test','1','1'); //(key,value,expiry in days)

Puedes obtener las cookies como

getCookie('test');

Y finalmente puedes borrar las cookies como esta

eraseCookie('test');

Espero que ayude a alguien :)

EDITAR:

Si desea configurar la cookie en toda la ruta / página / directorio, configure el atributo de ruta a la cookie

function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';path=/' + ';expires=' + expires.toUTCString();
}

Gracias vicky

Vignesh Pichamani
fuente
1
60 * 1000 = 60 segundos 60 * (60 * 1000) = 60 minutos que es 1 hora 24 * (60 * (60 * 1000)) = 1 día que 24 horas Espero que ayude.
Vignesh Pichamani
1
1 * 24 * 60 * 60 * 1000 personalizar 1 por 1 día o puedes hacer 365
Vignesh Pichamani
1
Buenas funciones ... ¿Pero por qué están dentro de una etiqueta document.ready?
Dss
1
Esto no funcionará en Safari o IE para ningún carácter fuera del rango ASCII, como é, etc. Además, esto no funcionará para algunos caracteres especiales que no están permitidos en el nombre de la cookie o el valor de la cookie. Recomiendo la siguiente referencia: tools.ietf.org/html/rfc6265
Fagner Brack
18

Puede usar un complemento disponible aquí ...

https://plugins.jquery.com/cookie/

y luego escribir una cookie hacer $.cookie("test", 1);

para acceder a la cookie establecida $.cookie("test");

Divyesh Kanzariya
fuente
3
hay una versión más nueva de ese complemento
Andrei Cristian Prodan
13

Aquí está mi módulo global que uso:

var Cookie = {   

   Create: function (name, value, days) {

       var expires = "";

        if (days) {
           var date = new Date();
           date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
           expires = "; expires=" + date.toGMTString();
       }

       document.cookie = name + "=" + value + expires + "; path=/";
   },

   Read: function (name) {

        var nameEQ = name + "=";
        var ca = document.cookie.split(";");

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == " ") c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    },

    Erase: function (name) {

        Cookie.create(name, "", -1);
    }

};
seanjacob
fuente
10

Asegúrese de no hacer algo como esto:

var a = $.cookie("cart").split(",");

Luego, si la cookie no existe, el depurador devolverá un mensaje inútil como ".cookie no es una función".

Siempre declare primero, luego haga la división después de verificar nulo. Me gusta esto:

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");
usuario890332
fuente
El código de muestra no está completo. ¿Es solo un único }que falta o faltan varias líneas de código?
Peter Mortensen el
Es solo una falta}, pero obviamente necesitará agregar más líneas de código para continuar con lo que quiere hacer con la división.
user890332
8

Así es como configura la cookie con JavaScript:

el siguiente código se ha tomado de https://www.w3schools.com/js/js_cookies.asp

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=/";
}

ahora puede obtener la cookie con la siguiente función:

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 "";
}

Y finalmente así es como revisas la cookie:

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        username = prompt("Please enter your name:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Si desea eliminar la cookie, simplemente configure el parámetro caduca en una fecha pasada:

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

Un ejemplo simple de configurar cookies en su navegador:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery.cookie Test Suite</title>

        <script src="jquery-1.9.0.min.js"></script>
        <script src="jquery.cookie.js"></script>
        <script src="JSON-js-master/json.js"></script>
        <script src="JSON-js-master/json_parse.js"></script>
        <script>
            $(function() {

               if ($.cookie('cookieStore')) {
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              }

              $('#submit').on('click', function(){

                    var storeData = new Array();
                    storeData[0] = $('#inputName').val();
                    storeData[1] = $('#inputAddress').val();

                    $.cookie("cookieStore", JSON.stringify(storeData));
                    var data=JSON.parse($.cookie("cookieStore"));
                    $('#name').text(data[0]);
                    $('#address').text(data[1]);
              });
            });

       </script>
    </head>
    <body>
            <label for="inputName">Name</label>
            <br /> 
            <input type="text" id="inputName">
            <br />      
            <br /> 
            <label for="inputAddress">Address</label>
            <br /> 
            <input type="text" id="inputAddress">
            <br />      
            <br />   
            <input type="submit" id="submit" value="Submit" />
            <hr>    
            <p id="name"></p>
            <br />      
            <p id="address"></p>
            <br />
            <hr>  
     </body>
</html>

Simple simplemente copie / pegue y use este código para configurar su cookie.

Webpixstudio
fuente
1
Solo una nota, el navegador almacena de forma predeterminada los recursos de acuerdo con sus nombres de archivo. En este ejemplo, se jquery-1.9.0.min.jsvolverá a cargar para todos cuando se actualice el nombre de archivo jquery-1.9.1.min.js; de lo contrario, el navegador NO realizará ninguna solicitud al servidor para verificar el contenido actualizado. Si actualiza el código dentro jquery.cookie.jssin cambiar su nombre de archivo, entonces NO se puede volver a cargar en los navegadores que ya almacenaron en caché el jquery.cookie.jsrecurso.
Fagner Brack
Si está escribiendo un sitio web y copiando / pegando esto, tenga en cuenta que esto no funcionará si actualiza la jquery.cookie.jsversión sin cambiar su nombre de archivo (a menos que su servidor se ocupe del almacenamiento en caché usando E-Tags).
Fagner Brack
if ($ .cookie ('cookieStore')) {var data = JSON.parse ($. cookie ("cookieStore")); // cuando se carga la página en una página diferente no encontrada $ ('# nombre'). text (data [0]); $ ('# dirección'). texto (datos [1]); }
Mohammad Javad
5

Puedes usar la biblioteca en el sitio web de Mozilla aquí

Podrás configurar y obtener cookies como esta

docCookies.setItem(name, value);
docCookies.getItem(name);
Moustafa Samir
fuente
3

Creo que Fresher nos dio una buena manera, pero hay un error:

    <script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
   </script>

Debe agregar "valor" cerca de getTime (); de lo contrario, la cookie caducará de inmediato :)

barman
fuente
2
"valor" podría ser una cadena. En la pregunta está usando 1 como ejemplo. El valor debe ser el valor de la clave, no la duración en días antes de que caduque la cookie. Si el valor se pasara como "foo", su versión se bloquearía.
Peter
1

Pensé que la respuesta de Vignesh Pichamani era la más simple y limpia. Solo agregando a él la capacidad de establecer el número de días antes de la expiración:

EDITAR: también se agregó la opción 'nunca caduca' si no se establece un número de día

        function setCookie(key, value, days) {
            var expires = new Date();
            if (days) {
                expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
            } else {
                document.cookie = key + '=' + value + ';expires=Fri, 30 Dec 9999 23:59:59 GMT;';
            }
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }

Establecer la cookie:

setCookie('myData', 1, 30); // myData=1 for 30 days. 
setCookie('myData', 1); // myData=1 'forever' (until the year 9999) 
Freeworlder
fuente
1

Sé que hay muchas respuestas geniales. A menudo, solo necesito leer las cookies y no quiero crear gastos generales cargando bibliotecas adicionales o definiendo funciones.

Aquí se explica cómo leer las cookies en una línea de javascript . Encontré la respuesta en el artículo del blog de Guilherme Rodrigues :

('; '+document.cookie).split('; '+key+'=').pop().split(';').shift()

Esto lee la cookie nombrada key, agradable, limpia y simple.

Fabian
fuente
-1
$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie('test', null); //delete cookie
Hasan Badshah
fuente