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

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

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

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

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

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 .

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

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'

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';

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/

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

})();

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

He usado js-cookie para el éxito.

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

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

var age = cookie.get('age', 25);

cookie.remove (nombre);

Eliminar la cookie

name: cookie name.

cookie.remove( 'age' );

Ejemplo de uso

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

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

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

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

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

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.