Comment puis-je créer et lire une valeur à partir d'un cookie?

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

JQuery Cookies

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

Approche ES6 minimaliste et complète:

 const setCookie = (name, value, days = 7, path = '/') => { const expires = new Date(Date.now() + days * 864e5).toGMTString() 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 lire et écrire des cookies avec un support unicode complet, ainsi que des exemples de comment l'utiliser.

Une fois inclus sur la page, vous pouvez définir un cookie:

 docCookies.setItem(name, value); 

Lisez 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 la page document.cookie de Mozilla .

Pour ceux qui ont besoin d'objets sauvegardés comme {foo: 'bar'}, je partage ma version éditée de la réponse de @ KevinBurke. J'ai ajouté JSON.stringify et JSON.parse, 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 ceci:

 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'ai déjà utilisé la réponse acceptée de ce fil plusieurs fois. C'est un excellent code: simple et utilisable. Mais j'utilise habituellement babel et ES6 et les modules, donc si vous êtes comme moi, voici un code à copier pour un développement plus rapide avec ES6

Réponse acceptée réécrite 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 d'accès peut varier)

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

Voici un code pour obtenir, définir et supprimer 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); } 

J'utilise cet objet. Les valeurs sont codées, il est donc nécessaire de la considérer lors de la lecture ou de l'écriture depuis le côté 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 }; })(); 

Je dois ajouter que l'incroyable Dustin Diaz a classé cette fonction comme son n ° 1, toutes ses fonctions JS personnalisées. C'est ce qu'il a suggéré pour obtenir, configurer et supprimer des cookies:

 function getCookie(name) { var start = document.cookie.indexOf(name + "="); var len = start + name.length + 1; if ((!start) && (name != document.cookie.substring(0, name.length))) { return null; } if (start == -1) return null; var end = document.cookie.indexOf(';', len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len, end)); } function setCookie(name, value, expires, path, domain, secure) { var today = new Date(); today.setTime(today.getTime()); if (expires) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date(today.getTime() + (expires)); document.cookie = name + '=' + escape(value) + ((expires) ? ';expires=' + expires_date.toGMTString() : '') + //expires.toGMTString() ((path) ? ';path=' + path : '') + ((domain) ? ';domain=' + domain : '') + ((secure) ? ';secure' : ''); } function deleteCookie(name, path, domain) { if (getCookie(name)) document.cookie = name + '=' + ((path) ? ';path=' + path : '') + ((domain) ? ';domain=' + domain : '') + ';expires=Thu, 01-Jan-1970 00:00:01 GMT'; } 

Une version améliorée du 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 briser dès que vous avez trouvé votre valeur de cookie et renvoyer sa valeur. À mon avis, très élégant avec la double scission.

Le remplacement sur 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); } } } 

Un moyen simple 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); }