javascript - read - ¿Cómo creo y leo un valor desde una cookie?

modificar cookie javascript

Question

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

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

Answer 2

Aquí hay un código para Obtener, Establecer y Eliminar Cookie 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/

Answer 3

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
opts = Object.entries(opts).reduce((str, [k, v]) => str + `; ${k}=${v}`, '''')
document.cookie = `${name}=${encodeURIComponent(value)}` + opts
}
, delete: (name, path) => Cookie.set(name, '''', -1, path)
}

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. Predeterminado : ubicación actual del documento,
• dominio : ''sub.example.com'' - puede no comenzar con un punto. Predeterminado : host actual sin subdominio.
• secure : true - Solo sirve cookies sobre https. Predeterminado : falso.
• Días : 2 días hasta que la cookie expira. Predeterminado : Fin de sesión.
  Formas alternativas de establecer la caducidad:
  • expira : ''Sun, 18 feb 2018 16:23:42 GMT'' - fecha de caducidad como una cadena GMT.
    La fecha actual se puede obtener con: new Date (Date.now ()). ToUTCString ()
  • ''max-age'' : 30 - igual que los 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.

Answer 4

Estas son funciones que puede utilizar para crear y recuperar cookies.

var createCookie = 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();
}
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 "";
}

Answer 5

He escrito cookiesUtils simples, tiene tres funciones para crear la cookie, leer la cookie y eliminar la cookie.

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

Answer 6

He usado js-cookie para el éxito.

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

Answer 7

He usado la respuesta aceptada de este hilo muchas veces ya. Es una gran pieza de código: simple y utilizable. Pero generalmente uso babel y ES6 y los módulos, así que si eres como yo, aquí tienes el 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 puede variar):

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

Answer 8

Minimalista y enfoque de ES6 con todas las funciones:

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

Answer 9

Mozilla proporciona un marco simple para leer y escribir cookies con soporte completo de 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'');

Ver más ejemplos y detalles en la página document.cookie de Mozilla .

Answer 10

Para aquellos que necesitan guardar objetos como {foo: ''bar''}, comparto mi versión editada de la respuesta de @KevinBurke. He añadido 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''

Answer 11

Una forma descarada y simple de leer una galleta podría ser algo como:

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

Esto podría usarse si sabe que su cookie contiene algo como: username="John Doe"; id=123; 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 probar / aprender.

Answer 12

Una forma sencilla de leer las 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);
}

Answer 13

Una versión mejorada de la 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 interrumpirse tan pronto como encuentre su valor de cookie y devuelva su valor. En mi opinión muy elegante con la doble división.

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

Answer 14

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

Answer 15

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

Answer 16

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