read - leer cookie javascript

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

Question

¿Cómo configuro y desactivo una cookie usando jQuery, por ejemplo, creo una cookie llamada test y establezco el valor en 1 ?

Answer 1

Aquí es cómo configurar la cookie con jQuery:

El siguiente código ha sido 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 puedes 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 se comprueba 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 de caducidad en una fecha pasada:

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

Answer 2

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

};

Answer 3

Asegúrate de no hacer algo como esto:

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

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

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

var a = $.cookie("cart");
if (a != null) {
    var aa = a.split(",");

Answer 4

Creo que Fresher nos dio un buen camino, 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>

Debes agregar "valor" cerca de getTime (); De lo contrario la cookie caducará inmediatamente :)

Answer 5

No es necesario utilizar jQuery especialmente para manipular cookies.

De QuirksMode (incluidos los personajes que escapan)

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

• ¿Cómo elimino un nombre de clase existente y agrego uno nuevo con jQuery y las cookies?

Answer 6

Pensé que la era la más simple y limpia. Solo añadiendo a su capacidad de establecer el número de días antes del vencimiento:

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) 

Answer 7

Puedes usar la biblioteca en el sitio web de Mozilla here

Podrás configurar y obtener cookies como esta.

docCookies.setItem(name, value);
docCookies.getItem(name);

Answer 8

Puedes usar un plugin disponible aquí ..

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

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

para acceder al conjunto de cookies, haga $.cookie("test");

Answer 9

Un ejemplo simple de configurar una cookie 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>

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

Answer 10

Ver el plugin:

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 2015):

Como se indica en los comentarios a continuación, el equipo que trabajó en el complemento original eliminó 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. Al parecer, el plugin original no va a ninguna parte sin embargo.

Answer 11

$.cookie("test", 1); //set cookie
$.cookie("test"); //get cookie
$.cookie(''test'', null); //delete cookie

Answer 12

<script type="text/javascript">
        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + (1 * 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>

Puede configurar las cookies como

setCookie(''test'',''1'');

Puede obtener las cookies como

getCookie(''test'');

Espero que ayude a alguien :)

EDITAR:

Si desea guardar la ruta de acceso de la cookie solo para la página de inicio, haga lo siguiente:

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

Gracias vicky