Comment créer et lire une valeur à partir de cookie?
comment créer et lire une valeur à partir d'un cookie en JavaScript?
14 réponses
Voici les fonctions que vous pouvez utiliser pour créer et récupérer des 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 "";
}
ou de la plaine Javascript:
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);
}
}
}
approche ES6 minimaliste et complète:
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)
}
Mozilla fournit un cadre simple pour la lecture et l'écriture de cookies avec le plein soutien unicode ainsi que des exemples de la façon de l'utiliser.
une fois inclus sur la page, vous pouvez définir un cookie:
docCookies.setItem(name, value);
lire un cookie:
docCookies.getItem(name);
ou supprimer un cookie:
docCookies.removeItem(name);
par exemple:
// 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');
Voir plus d'exemples et de détails sur document de Mozilla.cookie page .
j'ai utilisé accepté de répondre à ce fil de nombreuses fois déjà. C'est un super morceau de code: Simple et utilisable. Mais j'utilise habituellement babel et ES6 et les modules, donc si vous êtes comme moi, voici le code à copier pour un développement plus rapide avec ES6
Accepté de répondre réécrit comme module avec 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 '';
};
et après cela vous pouvez simplement l'importer comme n'importe quel module (le chemin peut varier):
import {createCookie, getCookie} from './../helpers/Cookie';
pour ceux qui ont besoin de sauvegarder des objets comme {foo: 'bar'}, je partage ma version éditée de la réponse de @KevinBurke. J'ai ajouté JSON.stringify et JSON.analyser, c'est tout.
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;
}
}
donc, maintenant vous pouvez faire des choses comme ça:
cookie.set('cookie_key', {foo: 'bar'}, 30);
cookie.get('cookie_key'); // {foo: 'bar'}
cookie.set('cookie_key', 'baz', 30);
cookie.get('cookie_key'); // 'baz'
Voici un code pour Get, Set et Supprimer les 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);
}
Source: http://mycodingtricks.com/snippets/javascript/javascript-cookies /
j'utilise cet objet. Les valeurs sont encodées, il est donc nécessaire de les prendre en compte lors de la lecture ou de l'écriture du côté du serveur.
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
};
})();
ES7, à l'aide d'une regex pour get(). Basé sur 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)
L'Utilisation De Cookies.get(nom, valeur [, options]):
options prend en charge toutes les options de cookie standard et ajoute "days":
- chemin : '/' - tout le chemin absolu. par Défaut : l'actuel emplacement du document,
- domaine : "sub.example.com-ne commence pas avec dot. Default : host actuel sans sous-domaine.
- sécurisé : true - Seulement servir de biscuit sur https. par Défaut : faux.
- jours : 2 - jours, jusqu'à ce cookie expire. Default : fin de session.
Les moyens alternatifs de réglage de l'expiration:- expire : "Sun, 18 Février 2018 16:23:42 GMT' - date d'expiration comme une GMT chaîne.
La date actuelle peut être obtenue avec: nouvelle Date (Date.maintenant.))(toUTCString () - 'max-age' : 30 - comme les jours, mais en secondes au lieu de jours.
- expire : "Sun, 18 Février 2018 16:23:42 GMT' - date d'expiration comme une GMT chaîne.
autres réponses utilisez "expires" au lieu de "max-age" pour soutenir versions plus anciennes de IE. Cette méthode nécessite ES7, donc IE7 est de toute façon.
Simple façon de lire les cookies dans ES6.
function getCookies() {
var cookies = {};
for (let cookie of document.cookie.split('; ')) {
let [name, value] = cookie.split("=");
cookies[name] = decodeURIComponent(value);
}
console.dir(cookies);
}
une version améliorée 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;
}
cela devrait se casser dès que vous avez trouvé votre valeur de cookie et retourner sa valeur. À mon avis Très élégant avec le double split.
le remplacement à la condition if est une garniture d'espace blanc, pour s'assurer qu'elle correspond correctement
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);
}
}
}
j'ai écrit des cookieUtils simples, il a trois fonctions pour créer le cookie, lire le cookie et supprimer le 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;';
}
};