Obtenir un cookie par nom
J'ai un getter pour obtenir la valeur d'un cookie.
Maintenant, j'ai 2 cookies du nom shares= et du nom obligations=.
Je veux créer ce getter uniquement pour obtenir les valeurs du cookie des obligations.
Comment puis-je faire cela? Donc, la for divise les données en valeurs séparées et les place dans un tableau.
function getCookie1() {
// What do I have to add here to look only in the "obligations=" cookie?
// Because now it searches all the cookies.
var elements = document.cookie.split('=');
var obligations= elements[1].split('%');
for (var i = 0; i < obligations.length - 1; i++) {
var tmp = obligations[i].split('$');
addProduct1(tmp[0], tmp[1], tmp[2], tmp[3]);
}
}
Une approche, qui évite de parcourir un tableau, serait la suivante:
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
Procédure pas à pas
Fractionner une chaîne par jeton produira soit un tableau avec une chaîne (même valeur), au cas où le jeton n'existe pas, ou un tableau avec deux chaînes, au cas où le jeton serait trouvé dans une chaîne.
Le premier élément (à gauche) est une chaîne de ce qui était avant le jeton et le second (à droite) est ce qui est une chaîne de ce qui était après le jeton.
(NOTE: dans le cas où la chaîne commence par un jeton, le premier élément est une chaîne vide)
Considérant que les cookies sont stockés comme suit:
"{name}={value}; {name}={value}; ..."
afin de récupérer une valeur de cookie spécifique, nous devons simplement obtenir une chaîne qui se trouve après "; {name} =" et avant le prochain ";". Avant tout traitement, nous ajoutons le caractère ";" à la chaîne de cookies, de sorte que chaque nom de cookie, y compris le premier, soit entouré de ";" et de "=":
"; {name}={value}; {name}={value}; ..."
Maintenant, nous pouvons d’abord nous séparer par "; {nom} =", et si un jeton est trouvé dans une chaîne de cookie (c’est-à-dire que nous avons deux éléments), nous finirons avec le deuxième élément étant une chaîne commençant par notre valeur de cookie. Ensuite, nous extrayons cela d’un tableau (c’est-à-dire de la pop) et répétons le même processus, mais maintenant avec ";" en tant que jeton, mais cette fois en tirant la chaîne de gauche (c.-à-d. shift) pour obtenir la valeur réelle du jeton.
Je préférerais utiliser une seule correspondance d'expression régulière sur le cookie:
window.getCookie = function(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) return match[2];
}
Amélioré grâce à Scott Jungwirth dans les commentaires.
utilisez un script pour récupérer les cookies:
function readCookie(name) {
var nameEQ = name + "=";
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,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
puis appelez-le:
var value = readCookie('obligations');
j'ai volé le code ci-dessus sur la page des cookies de Quirksmode. vous devriez le lire .
Si vous utilisez jQuery, je vous recommande d'utiliser ce plugin:
https://github.com/carhartl/jquery-cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
Ainsi, vous pouvez lire un cookie comme ceci:
var value = $.cookie("obligations");
Aussi, vous pouvez écrire un cookie:
$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });
Supprimer le cookie:
$.removeCookie('obligations');
Les méthodes de certaines des autres réponses qui utilisent une expression régulière ne couvrent pas tous les cas, en particulier:
- Lorsque le cookie est le dernier cookie. Dans ce cas, il n'y aura pas de point-virgule après la valeur du cookie.
- Lorsqu'un autre nom de cookie se termine par le nom recherché. Par exemple, vous recherchez le cookie nommé "un" et il existe un cookie nommé "done".
- Lorsque le nom du cookie inclut des caractères qui ne sont pas interprétés comme tels lorsqu'ils sont utilisés dans une expression régulière, à moins qu'ils ne soient précédés d'une barre oblique inverse.
La méthode suivante gère ces cas:
function getCookie(name) {
function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
return match ? match[1] : null;
}
Ceci retournera null si le cookie n’est pas trouvé. Il retournera une chaîne vide si la valeur du cookie est vide.
Remarques:
- Cette fonction suppose que les noms de cookies sont sensibles à la casse .
document.cookie- Lorsqu'il apparaît à droite d'une affectation, il représente une chaîne contenant une liste de cookies séparés par des points-virgules, qui sont à leur tour des pairesname=value. Il semble y avoir un seul espace après chaque point-virgule.String.prototype.match()- Retournenullsi aucune correspondance n'est trouvée. Retourne un tableau lorsqu'une correspondance est trouvée et que l'élément à l'index[1]est la valeur du premier groupe correspondant.
Notes sur les expressions régulières:
(?:xxxx)- forme un groupe ne correspondant pas.^- correspond au début de la chaîne.|- sépare les modèles alternatifs pour le groupe.;\\s*- correspond à un point-virgule suivi de zéro ou de plusieurs caractères d'espacement.=- correspond à un signe égal.(xxxx)- forme un groupe correspondant.[^;]*- correspond à zéro ou plusieurs caractères autres qu'un point-virgule. Cela signifie que les caractères correspondants seront égaux jusqu'à un point-virgule ou à la fin de la chaîne, sans l'inclure.
J'ai modifié la fonction fournie par Jonathan ici, en utilisant une expression régulière, vous pouvez obtenir une valeur de cookie par son nom comme ceci:
function getCookie(name){
var pattern = RegExp(name + "=.[^;]*")
matched = document.cookie.match(pattern)
if(matched){
var cookie = matched[0].split('=')
return cookie[1]
}
return false
}
S'il renvoie une chaîne vide, cela signifie que le cookie existe mais qu'il n'a pas de valeur. S'il renvoie false, le cookie n'existe pas. J'espère que ça aide.
4 ans plus tard, version ES6 plus simple.
function getCookie(name) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [k,v] = el.split('=');
cookie[k.trim()] = v;
})
return cookie[name];
}
J'ai également créé un Gist pour l'utiliser en tant qu'objet Cookie. Par exemple, Cookie.set(name,value) et Cookie.get(name)
Cette lecture de tous les cookies au lieu de parcourir. C'est ok pour un petit nombre de cookies.
Je sais que c'est une vieille question, mais j'ai aussi rencontré ce problème. Pour mémoire, il existe une petite API dans les développeurs page Web mozilla .
Yoy peut obtenir un cookie par son nom en utilisant uniquement JS. Le code est également plus propre IMHO (sauf pour la longue ligne, que je suis sûr que vous pouvez facilement réparer).
function getCookie(sKey) {
if (!sKey) { return null; }
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}
Comme indiqué dans les commentaires, sachez que cette méthode suppose que la clé et la valeur ont été codées à l'aide de encodeURIComponent (). Supprimez decode & encodeURIComponent () si la clé et la valeur du cookie n’ont pas été codées.
Utilisez object.defineProperty
Avec cela, vous pouvez facilement accéder aux cookies
Object.defineProperty(window, "Cookies", {
get: function() {
return document.cookie.split(';').reduce(function(cookies, cookie) {
cookies[cookie.split("=")[0]] = unescape(cookie.split("=")[1]);
return cookies
}, {});
}
});
A partir de maintenant vous pouvez juste faire:
alert( Cookies.obligations );
Cela se mettra automatiquement à jour aussi, donc si vous modifiez un cookie, la Cookies changera également.
Fonction simple pour Obtenir un cookie avec le nom du cookie:
function getCookie(cn) {
var name = cn+"=";
var allCookie = decodeURIComponent(document.cookie).split(';');
var cval = [];
for(var i=0; i < allCookie.length; i++) {
if (allCookie[i].trim().indexOf(name) == 0) {
cval = allCookie[i].trim().split("=");
}
}
return (cval.length > 0) ? cval[1] : "";
}
kirlich a donné une bonne solution. Cependant, il échoue lorsqu'il existe deux valeurs de cookie portant des noms similaires. Voici un correctif simple pour cette situation:
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length >= 2) return parts.pop().split(";").shift();
}
fonctionne toujours bien:
function getCookie(cname) {
var name = cname + "=",
ca = document.cookie.split(';'),
i,
c,
ca_length = ca.length;
for (i = 0; i < ca_length; i += 1) {
c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) !== -1) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(variable, value, expires_seconds) {
var d = new Date();
d = new Date(d.getTime() + 1000 * expires_seconds);
document.cookie = variable + '=' + value + '; expires=' + d.toGMTString() + ';';
}
Aucune exigence pour jQuery ou quoi que ce soit. Pur vieux bon JavaScript.
Voici une jolie version courte
function getCookie(n) {
let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
return a ? a[1] : '';
}
Notez que j'ai utilisé les chaînes de modèle d'ES6 pour composer l'expression regex.
Dans mes projets, j'utilise la fonction suivante pour accéder aux cookies par nom
function getCookie(cookie) {
return document.cookie.split(';').reduce(function(prev, c) {
var arr = c.split('=');
return (arr[0].trim() === cookie) ? arr[1] : prev;
}, undefined);
}
Il me semble que vous pourriez scinder les paires clé-valeur de cookie en un tableau et baser votre recherche sur les éléments suivants:
var obligations = getCookieData("obligations");
Qui exécute ce qui suit:
function getCookieData( name ) {
var pairs = document.cookie.split("; "),
count = pairs.length, parts;
while ( count-- ) {
parts = pairs[count].split("=");
if ( parts[0] === name )
return parts[1];
}
return false;
}
Fiddle: http://jsfiddle.net/qFmPc/
Ou peut-être même ce qui suit:
function getCookieData( name ) {
var patrn = new RegExp( "^" + name + "=(.*?);" ),
patr2 = new RegExp( " " + name + "=(.*?);" );
if ( match = (document.cookie.match(patrn) || document.cookie.match(patr2)) )
return match[1];
return false;
}
Vous pouvez utiliser js-cookie library pour obtenir et définir les cookies JavaScript.
Inclure à votre HTML:
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
Pour créer un cookie:
Cookies.set('name', 'value');
Pour lire un cookie:
Cookies.get('name'); // => 'value'
défini par javascript
document.cookie = 'cookiename=tesing';
obtenez par jquery avec le plugin jquery-cookie
var value = $.cookie("cookiename");
alert(value);
Il y a déjà de bonnes réponses ici pour obtenir le cookie. Cependant, voici ma propre solution:
function getcookie(cookiename){
var cookiestring = document.cookie;
var cookiearray = cookiestring.split(';');
for(var i =0 ; i < cookiearray.length ; ++i){
if(cookiearray[i].trim().match('^'+cookiename+'=')){
return cookiearray[i].replace(`${cookiename}=`,'').trim();
}
} return null;
}
utilisation: `
getcookie('session_id');
// gets cookie with name session_id
référence: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
alert(cookieValue);
function getCookie(name) {
var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
if (pair)
return pair.split('=')[1]
}
Ma solution est la suivante:
function getCookieValue(cookieName) {
var ca = document.cookie.split('; ');
return _.find(ca, function (cookie) {
return cookie.indexOf(cookieName) === 0;
});
}
Cette fonction utilise la fonction Underscorejs _.find. Renvoie undefined si le nom du cookie n'existe pas
Je l'ai fait de cette façon. de sorte que je puisse transmettre un cookie au parent puis vous pouvez accéder à vos valeurs par les touches comme
var cookies=getCookieVal(mycookie);
alert(cookies.mykey);
function getCookieVal(parent) {
var cookievalue = $.cookie(parent).split('&');
var obj = {};
$.each(cookievalue, function (i, v) {
var key = v.substr(0, v.indexOf("="));
var val = v.substr(v.indexOf("=") + 1, v.length);
obj[key] = val;
});
return obj;
}
Apparemment, MDN n’a jamais entendu parler de la classe \b, qui correspond au \w+ contigu, qui est lié à \W+:
getCookie = function(name) {
var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
return r ? r[1] : null;
};
var obligations = getCookie('obligations');
Si vous avez juste besoin de vérifier si un cookie existe, procédez comme suit:
document.cookie.split('logged=true').length == 2
si le cookie enregistré = vrai existe, vous obtiendrez 2, sinon 1.
enregistré = vrai - change ceci en votre nom de cookie = valeur, ou juste un nom
Une approche fonctionnelle pour trouver des cookies existants. Il retourne un tableau, donc il supporte plusieurs occurrences du même nom. Il ne supporte pas la correspondance de clé partielle, mais il est trivial de remplacer le === dans le filtre par une expression régulière.
function getCookie(needle) {
return document.cookie.split(';').map(function(cookiestring) {
cs = cookiestring.trim().split('=');
if(cs.length === 2) {
return {'name' : cs[0], 'value' : cs[1]};
} else {
return {'name' : '', 'value' : ''};
}
})
.filter(function(cookieObject) {
return (cookieObject.name === needle);
});
}
La fonction suivante renvoie une paire key-value du cookie requis, où key est le nom du cookie et value sera sa valeur.
/**
* Returns cookie key-value pair
*/
var getCookieByName = function(name) {
var result = ['-1','-1'];
if(name) {
var cookieList = document.cookie.split(';');
result = $.grep(cookieList,function(cookie) {
cookie = cookie.split('=')[0];
return cookie == name;
});
}
return result;
};
Juste pour ajouter une réponse "officielle" à cette réponse, je copie/colle la solution pour définir et récupérer les cookies de MDN (voici le JSfiddle
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
function alertCookieValue() {
alert(cookieValue);
}
Dans votre cas particulier, vous utiliseriez la fonction suivante
function getCookieValue() {
return document.cookie.replace(/(?:(?:^|.*;\s*)obligations\s*\=\s*([^;]*).*$)|^.*$/, "$1");
}
Notez que j'ai seulement remplacé "test2" dans l'exemple, par "obligations".
J'aime utiliser une fermeture pour obtenir les valeurs de cookie par leur nom. La fermeture ci-dessous vous permettra d'obtenir une valeur de cookie par nom, mais analysera uniquement la chaîne de cookie si elle a été mise à jour.
Vous pouvez récupérer la valeur d'un cookie avec les éléments suivants:
var foo = cookies.get( "bar" );
Code:
var cookies = ( function() {
var cookieString = null;
var cookieArray = [];
function getValOf( name ) {
if ( newCookies() ) {
parseCookieString()
}
return cookieArray[ name ];
}
// Check if new cookies have been added
function newCookies() {
return cookieString === document.cookie;
}
function parseCookieString() {
cookieString = document.cookie;
// Separate cookies
var cookies = cookieString.split( ";" );
// Empty previous cookies
cookieArray = [];
// Update cookieArray with new name-value pairs
for ( var i in cookies ) {
// Separate name and value
var nameVal = cookies[ i ].split( "=" );
var name = nameVal[ 0 ].trim();
var value = nameVal[ 1 ].trim();
// Add cookie name value pair to dictionary
cookieArray[ name ] = value;
}
}
return {
/**
* Returns value or undefined
*/
get: function( name ) {
return getValOf( name );
}
};
})();
Je ferais quelque chose comme ça:
function getCookie(cookie){
return cookie
.trim()
.split(';')
.map(function(line){return line.split(',');})
.reduce(function(props,line) {
var name = line[0].slice(0,line[0].search('='));
var value = line[0].slice(line[0].search('='));
props[name] = value;
return props;
},{})
}
Cela retournera votre cookie sous forme d'objet.
Et ensuite, vous pouvez l'appeler comme ceci:
getCookie(document.cookie)['shares']
maintenant, vous pouvez obtenir des cookies à retourner sous forme de tableau lorsque vous les avez stockés dans un format de tableau. Par exemple, votre cookie est array [35] = Khóa; tableau [36] = Tử; tableau [37] = Cửa; et ce code avec utf8 aussi. une chose ne fonctionne pas bien lorsque votre nom de cookie contenu [] et que vous stockez les cookies ne sont pas dans le tableau.
function getCookie(cname) {
var ca = decodeURIComponent(document.cookie).split(';');
if (cname.indexOf('[]') > 0) {
var returnVAlue = [];
var nameArray = cname.replace("[]", "");
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
// console.log(c);
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(nameArray) >= 0) {
var valueString = c.substr(nameArray.length, c.length);
var valueStringSlit = valueString.split('=');
valueStringSlit[0] = valueStringSlit[0].substr(1,(valueStringSlit[0].length - 2));
// console.log(valueStringSlit);
returnVAlue.Push(valueStringSlit);
}
}
} else {
var returnVAlue = '';
var name = cname + "=";
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
// console.log(c);
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
returnVAlue = c.substr(name.length, c.length);
}
}
}
if (returnVAlue != ''){
return returnVAlue;
}
return "";
}
// console.log(decodeURIComponent(document.cookie));
console.log(getCookie('array[]'));
Exemple de cookies: exemple JS:
document.cookies = {
create : function(key, value, time){
if (time) {
var date = new Date();
date.setTime(date.getTime()+(time*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = key+"="+value+expires+"; path=/";
},
erase : function(key){
this.create(key,"",-1);
},
read : function(key){
var keyX = key + "=";
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,c.length);
if (c.indexOf(keyX) == 0) return c.substring(keyX.length,c.length);
}
return null;
}
}
Stocker des tableaux et des objets avec json ou xml