¿Cómo creo y leo un valor de cookie?


274

¿Cómo puedo crear y leer un valor de una cookie en JavaScript?



FWIW, js-cookie proporciona una API muy buena para manejarlo.
Fagner Brack

Puedes consultar esta guía en JavaScript Cookie .
Shubham Kumar

No olvide que la API de almacenamiento web podría ser una buena alternativa a las cookies en algunas situaciones.
MattBianco

Respuestas:


234

Aquí hay funciones que puede usar para crear y recuperar cookies.

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 = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

23
Esto no funciona si su valor de cookie contiene algo que no codifica / decodifica bien. El de w3schools parece funcionar muy bien
Richard Rout

13
Este contenedor simple de Mozilla también tiene soporte explícito de Unicode mencionado
Brad Parks,

44
@BradParks Lástima que se haya lanzado en GPL.
jahu

1
Esto no funcionará en IE8 o 9 si la cookie no tiene un valor, porque IE no agrega el signo igual ( = ) después del nombre de la cookie. Lo que hacemos es verificar si indexOf ("=") == - 1 , y si es así, usar la cookie completa como el nombre de la cookie.
Mohoch

@jahu Y diría que también está en el dominio público: developer.mozilla.org/en-US/docs/MDN/…
Cronológico

52

Enfoque minimalista y con todas las funciones de ES6:

const setCookie = (name, value, days = 7, path = '/') => {
  const expires = new Date(Date.now() + days * 864e5).toUTCString()
  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}

const getCookie = (name) => {
  return document.cookie.split('; ').reduce((r, v) => {
    const parts = v.split('=')
    return parts[0] === name ? decodeURIComponent(parts[1]) : r
  }, '')
}

const deleteCookie = (name, path) => {
  setCookie(name, '', -1, path)
}

2
toGMTString()está en desuso, úselo en su toUTCString()lugar.
Thanh Nguyen

@NguyenThanh Thx! Actualizado
artnikpro

1
A veces, el valor de la cookie en sí puede contener =signos. En ese caso, la función getCookieproducirá un resultado inesperado. Para evitar eso, considere usar el siguiente cuerpo de función de flecha dentro de reducirconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
Dmitriy Zhura

Sin embargo, sería bueno tener una opción para dejar la fecha de vencimiento sin establecer. Esto permitiría que la cookie se elimine automáticamente al salir del navegador.
xji

44
864e5 = 86400000 = 1000*60*60*24representa el número de milisegundos en un día de 24 horas.
Henrikh Kantuni

41

Cookies JQuery

o Javascript simple:

function setCookie(c_name,value,exdays)
{
   var exdate=new Date();
   exdate.setDate(exdate.getDate() + exdays);
   var c_value=escape(value) + ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));
   document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
   var i,x,y,ARRcookies=document.cookie.split(";");
   for (i=0; i<ARRcookies.length; i++)
   {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
      {
        return unescape(y);
      }
   }
}

1
Estoy marcando esto principalmente porque mencionaste JQuery Cookies. Lo recomendaría El código es muy pequeño y si ya está utilizando JQuery, es lo correcto.
w0rp

17

Mozilla proporciona un marco simple para leer y escribir cookies con soporte completo Unicode junto con ejemplos de cómo usarlo.

Una vez incluido en la página, puede configurar una cookie:

docCookies.setItem(name, value);

leer una cookie:

docCookies.getItem(name);

o eliminar una cookie:

docCookies.removeItem(name);

Por ejemplo:

// sets a cookie called 'myCookie' with value 'Chocolate Chip'
docCookies.setItem('myCookie', 'Chocolate Chip');

// reads the value of a cookie called 'myCookie' and assigns to variable
var myCookie = docCookies.getItem('myCookie');

// removes the cookie called 'myCookie'
docCookies.removeItem('myCookie');

Vea más ejemplos y detalles en la página del documento de Mozilla. .

Una versión de este simple archivo js está en github .


2
Tenga en cuenta que la biblioteca de cookies proporcionada en MDN se publica bajo la GPL, no LGPL.
Todos los trabajadores son esenciales

¿Qué archivo javascript necesito importar? No pude encontrarlo :(
AlikElzin-kilaka

Consulte la sección bajo "Biblioteca" en esta página: developer.mozilla.org/en-US/docs/Web/API/document/… - puede guardarlo en un archivo e incluirlo o pegarlo en un archivo js existente donde te gustaría usarlo.
Brendan Nee

Entonces, ¿no hay un archivo JavaScript independiente? Entonces es un fragmento de código, no una biblioteca real.
AlikElzin-kilaka

Gran aporte! La "biblioteca" es un único archivo .js con ~ 80 líneas; es este archivo (en GitHub): github.com/madmurphy/cookies.js/blob/master/cookies.js
Philipp

8

ES7, usando una expresión regular para get (). Basado en MDN

const Cookie =
    { get: name => {
        let c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
        if (c) return decodeURIComponent(c)
        }
    , set: (name, value, opts = {}) => { 
        if (opts.days) { 
            opts['max-age'] = opts.days * 60 * 60 * 24; 
            delete opts.days 
            }
        opts = Object.entries(opts).reduce((str, [k, v]) => `${str}; ${k}=${v}`, '')
        document.cookie = name + '=' + encodeURIComponent(value) + opts
        }
    , delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts}) 
    // path & domain must match cookie being deleted 
    }

Cookie.set('user', 'Jim', {path: '/', days: 10}) 
// Set the path to top level (instead of page) and expiration to 10 days (instead of session)

Uso - Cookie.get (nombre, valor [, opciones]):
opciones admite todas las opciones de cookies estándar y agrega "días":

  • ruta : '/': cualquier ruta absoluta. Valor predeterminado : ubicación actual del documento,
  • dominio : 'sub.example.com' - puede no comenzar con punto. Valor predeterminado : host actual sin subdominio.
  • seguro : verdadero: solo sirve cookies a través de https. Predeterminado : falso.
  • días : 2 días hasta que caduque la cookie. Predeterminado : Fin de la sesión.
    Formas alternativas de establecer la caducidad:
    • caduca : 'Dom, 18 de febrero de 2018 16:23:42 GMT' - fecha de caducidad como cadena GMT.
      La fecha actual se puede obtener con: new Date (Date.now ()). ToUTCString ()
    • 'max-age' : 30 - lo mismo que días, pero en segundos en lugar de días.

Otras respuestas usan "caduca" en lugar de "max-age" para admitir versiones anteriores de IE. Este método requiere ES7, por lo que IE7 está fuera de todos modos (esto no es un gran problema).

Nota: los caracteres divertidos como "=" y "{:}" se admiten como valores de cookies, y la expresión regular maneja los espacios en blanco iniciales y finales (de otras bibliotecas).
Si desea almacenar objetos, codifíquelos antes y después con y JSON.stringify y JSON.parse, edite lo anterior o agregue otro método. P.ej:

Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);

¿Podrían los downvoters explicar amablemente qué hay de malo en mi método?
SamGoody

1
1. Más corto e IMO más fácil de mantener. 2. Más completo (es la única respuesta para aceptar seguro, cualquier orden de argumentos, edad máxima). 3. Más valores predeterminados estándar (la ruta, etc., está predeterminada al estándar, a diferencia de la mayoría de las respuestas aquí). 4. Mejores prácticas (según MDN, la expresión regular es la forma más confiable de extraer los valores). 5. Futureprook (si se agregan más opciones a las cookies, se mantendrán). 6. Un objeto contamina el código menos que un montón de funciones. 7. Obtener, configurar y eliminar y fácil de agregar más métodos. 8. ES7 (deliciosas palabras de moda).
SamGoody

7

Para aquellos que necesitan guardar objetos como {foo: 'bar'}, comparto mi versión editada de la respuesta de @ KevinBurke. He agregado JSON.stringify y JSON.parse, eso es todo.

cookie = {

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

    get : function(name){
        var nameEQ = name + "=",
            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  JSON.parse(c.substring(nameEQ.length,c.length));
        }

        return null;
    }

}

Entonces, ahora puedes hacer cosas como esta:

cookie.set('cookie_key', {foo: 'bar'}, 30);

cookie.get('cookie_key'); // {foo: 'bar'}

cookie.set('cookie_key', 'baz', 30);

cookie.get('cookie_key'); // 'baz'

5

Ya he usado la respuesta aceptada de este hilo muchas veces. Es un gran código: simple y utilizable. Pero generalmente uso babel y ES6 y módulos, así que si eres como yo, aquí hay un código para copiar para un desarrollo más rápido con ES6

Respuesta aceptada reescrita como módulo con ES6:

export const createCookie = ({name, value, days}) => {
  let expires;
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = '; expires=' + date.toGMTString();
  } else {
    expires = '';
  }
  document.cookie = name + '=' + value + expires + '; path=/';
};

export const getCookie = ({name}) => {
  if (document.cookie.length > 0) {
    let c_start = document.cookie.indexOf(name + '=');
    if (c_start !== -1) {
      c_start = c_start + name.length + 1;
      let c_end = document.cookie.indexOf(';', c_start);
      if (c_end === -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return '';
};

Y después de esto, simplemente puede importarlo como cualquier módulo (la ruta, por supuesto, puede variar):

import {createCookie, getCookie} from './../helpers/Cookie';

5

Aquí hay un código para obtener, configurar y eliminar cookies en JavaScript .

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

function setCookie(name, value, expirydays) {
 var d = new Date();
 d.setTime(d.getTime() + (expirydays*24*60*60*1000));
 var expires = "expires="+ d.toUTCString();
 document.cookie = name + "=" + value + "; " + expires;
}

function deleteCookie(name){
  setCookie(name,"",-1);
}

Fuente: http://mycodingtricks.com/snippets/javascript/javascript-cookies/


2

Yo uso este objeto. Los valores están codificados, por lo que es necesario tenerlo en cuenta al leer o escribir desde el lado del servidor.

cookie = (function() {

/**
 * Sets a cookie value. seconds parameter is optional
 */
var set = function(name, value, seconds) {
    var expires = seconds ? '; expires=' + new Date(new Date().getTime() + seconds * 1000).toGMTString() : '';
    document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
};

var map = function() {
    var map = {};
    var kvs = document.cookie.split('; ');
    for (var i = 0; i < kvs.length; i++) {
        var kv = kvs[i].split('=');
        map[kv[0]] = decodeURIComponent(kv[1]);
    }
    return map;
};

var get = function(name) {
    return map()[name];
};

var remove = function(name) {
    set(name, '', -1);
};

return {
    set: set,
    get: get,
    remove: remove,
    map: map
};

})();

0

Manera simple de leer cookies en ES6.

function getCookies() {
    var cookies = {};
    for (let cookie of document.cookie.split('; ')) {
        let [name, value] = cookie.split("=");
        cookies[name] = decodeURIComponent(value);
    }
    console.dir(cookies);
}

0

He usado js-cookie para el éxito.

<script src="/path/to/js.cookie.js"></script>
<script>
  Cookies.set('foo', 'bar');
  Cookies.get('foo');
</script>

0

Puede usar mi módulo de cookies ES para obtener / configurar / eliminar cookies.

Uso:

En su etiqueta principal, incluya el siguiente código:

<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.js"></script>

o

<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.min.js"></script>

Ahora puede usar window.cookie para almacenar información del usuario en páginas web.

cookie.isEnabled ()

¿Está habilitada la cookie en su navegador web?

returns {boolean} true if cookie enabled.

Ejemplo

if ( cookie.isEnabled() )
    console.log('cookie is enabled on your browser');
else
    console.error('cookie is disabled on your browser');

cookie.set (nombre, valor)

Pon una galleta.

name: cookie name.
value: cookie value.

Ejemplo

cookie.set('age', 25);

cookie.get (nombre [, valor predeterminado]);

conseguir una galleta

name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
Ejemplo
var age = cookie.get('age', 25);

cookie.remove (nombre);

Eliminar la cookie

name: cookie name.
Ejemplo
cookie.remove( 'age' );

Ejemplo de uso


-1

Una versión mejorada de readCookie:

function readCookie( name )
{
    var cookieParts = document.cookie.split( ';' )
    ,   i           = 0
    ,   part
    ,   part_data
    ,   value
    ;

    while( part = cookieParts[ i++ ] )
    {
        part_data = part.split( '=' );

        if ( part_data.shift().replace(/\s/, '' ) === name )
        {
            value = part_data.shift();
            break;
        }

    }
    return value;
}

Esto debería romperse tan pronto como encuentre el valor de su cookie y devuelva su valor. En mi opinión muy elegante con el doble split.

El reemplazo en la condición if es un recorte de espacio en blanco, para asegurarse de que coincida correctamente


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

function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

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

-1

He escrito cookieUtils simples, tiene tres funciones para crear la cookie, leerla y eliminarla.

var CookieUtils = {
    createCookie: function (name, value, expireTime) {
        expireTime = !!expireTime ? expireTime : (15 * 60 * 1000); // Default 15 min
        var date = new Date();
        date.setTime(date.getTime() + expireTime);
        var expires = "; expires=" + date.toGMTString();
        document.cookie = name + "=" + value + expires + "; path=/";
    },
    getCookie: function (name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length == 2) {
            return parts.pop().split(";").shift();
        }
    },
    deleteCookie: function(name) {
        document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
};

-1

Aquí está el ejemplo de w3chools que se mencionó.

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

-1

Una simple lectura

var getCookie = function (name) {
    var valueStart = document.cookie.indexOf(name + "=") + name.length + 1;
    var valueEnd = document.cookie.indexOf(";", valueStart); 
    return document.cookie.slice(valueStart, valueEnd)
}

-2

Una manera descarada y simple de leer una cookie podría ser algo como:

let username, id; 
eval(document.cookie); 
console.log(username + ", " + id); // John Doe, 123

Esto podría ser utilizado si sabe que su cookie contiene algo como: username="John Doe"; id=123;. Tenga en cuenta que una cadena necesitaría comillas en la cookie. Probablemente no sea la forma recomendada, pero funciona para pruebas / aprendizaje.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.