Como posso criar e ler um valor de um cookie em JavaScript?
Como posso criar e ler um valor de um cookie em JavaScript?
Respostas:
Aqui estão as funções que você pode usar para criar e 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 "";
}
Abordagem ES6 minimalista e com todos os recursos:
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)
}
toGMTString()
está obsoleto, use em toUTCString()
vez disso.
=
sinal. Nesse caso, a função getCookie
produzirá resultado inesperado. Para evitar que considerar o uso seguinte corpo da função seta dentro reduzirconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
864e5 = 86400000 = 1000*60*60*24
representa o número de milissegundos em um dia de 24 horas.
ou Javascript simples:
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);
}
}
}
O Mozilla fornece uma estrutura simples para leitura e gravação de cookies com suporte total a Unicode, além de exemplos de como usá-lo.
Depois de incluído na página, você pode definir um cookie:
docCookies.setItem(name, value);
leia um cookie:
docCookies.getItem(name);
ou exclua um cookie:
docCookies.removeItem(name);
Por exemplo:
// 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');
Veja mais exemplos e detalhes na página document.cookie da Mozilla .
Uma versão deste arquivo js simples está no github .
ES7, usando um regex para get (). Baseado no 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 (nome, valor [, opções]): as
opções suportam todas as opções padrão de cookies e adicionam "dias":
Outras respostas usam "expira" em vez de "idade máxima" para oferecer suporte a versões mais antigas do IE. Este método requer o ES7, portanto, o IE7 não está disponível (isso não é grande coisa).
Nota: Caracteres engraçados como "=" e "{:}" são suportados como valores de cookie, e o regex lida com espaços em branco à esquerda e à direita (de outras bibliotecas).
Se você deseja armazenar objetos, codifique-os antes e depois com JSON.stringify e JSON.parse, edite o item acima ou inclua outro método. Por exemplo:
Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);
Para quem precisa salvar objetos como {foo: 'bar'}, compartilho minha versão editada da resposta de @ KevinBurke. Adicionei JSON.stringify e JSON.parse, isso é tudo.
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;
}
}
Então, agora você pode fazer coisas assim:
cookie.set('cookie_key', {foo: 'bar'}, 30);
cookie.get('cookie_key'); // {foo: 'bar'}
cookie.set('cookie_key', 'baz', 30);
cookie.get('cookie_key'); // 'baz'
Já usei a resposta aceita deste tópico muitas vezes. É um ótimo código: simples e utilizável. Mas eu costumo usar babel, ES6 e módulos, então se você é como eu, aqui está o código para copiar para um desenvolvimento mais rápido com o ES6
Resposta aceita reescrita como módulo no 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 '';
};
E depois disso, você pode simplesmente importá-lo como qualquer módulo (o caminho pode variar):
import {createCookie, getCookie} from './../helpers/Cookie';
Aqui está um código para obter, definir e excluir cookies em 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);
}
Fonte: http://mycodingtricks.com/snippets/javascript/javascript-cookies/
Eu uso esse objeto. Os valores são codificados, portanto, é necessário considerá-lo ao ler ou escrever no lado do 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
};
})();
Maneira simples de ler cookies no ES6.
function getCookies() {
var cookies = {};
for (let cookie of document.cookie.split('; ')) {
let [name, value] = cookie.split("=");
cookies[name] = decodeURIComponent(value);
}
console.dir(cookies);
}
Você pode usar o meu módulo ES do cookie para obter / configurar / remover o cookie.
Na sua tag head, inclua o seguinte código:
<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.js"></script>
ou
<script src="https://raw.githack.com/anhr/cookieNodeJS/master/build/cookie.min.js"></script>
Agora você pode usar o window.cookie para armazenar informações do usuário em páginas da web.
O cookie está ativado no seu navegador?
returns {boolean} true if cookie enabled.
Exemplo
if ( cookie.isEnabled() )
console.log('cookie is enabled on your browser');
else
console.error('cookie is disabled on your browser');
Defina um cookie.
name: cookie name.
value: cookie value.
Exemplo
cookie.set('age', 25);
pegue um biscoito.
name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
Exemplo
var age = cookie.get('age', 25);
Remova o cookie.
name: cookie name.
Exemplo
cookie.remove( 'age' );
Uma versão aprimorada do 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;
}
Isso deve ser interrompido assim que você encontrar o valor do cookie e retornar seu valor. Na minha opinião, muito elegante com a dupla divisão.
A substituição na condição if é um recorte de espaço em branco, para garantir que ele corresponda corretamente
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);
}
}
}
Eu escrevi cookieUtils simples, ele tem três funções para criar o cookie, ler o cookie e excluir o 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;';
}
};
Aqui está o exemplo de w3chools que foi mencionado.
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 "";
}
Uma maneira atrevida e simples de ler um cookie pode ser algo como:
let username, id;
eval(document.cookie);
console.log(username + ", " + id); // John Doe, 123
Isto poderia ser usado se você sabe o seu cookie contém algo como: username="John Doe"; id=123;
. Observe que uma string precisaria de aspas no cookie. Provavelmente não é a maneira recomendada, mas funciona para teste / aprendizado.