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


274

Comment créer et lire une valeur à partir d'un cookie en JavaScript?



FWIW, js-cookie fournit une très bonne API pour le gérer.
Fagner Brack

Vous pouvez consulter ce guide sur JavaScript Cookie .
Shubham Kumar

N'oubliez pas que l' API Web Storage peut être une bonne alternative aux cookies dans certaines situations.
MattBianco

Réponses:


234

Voici les fonctions que vous pouvez utiliser pour créer et récupérer des 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 "";
}

23
Cela ne fonctionne pas si votre valeur de cookie contient quelque chose qui n'encode / décode pas bien. Celui de w3schools semble fonctionner à merveille
Richard Rout

13
Ce wrapper simple de Mozilla a également un support explicite unicode mentionné
Brad Parks

4
@BradParks Dommage qu'il soit sorti sur GPL.
jahu

1
Cela ne fonctionnera pas sur IE8 ou 9 si le cookie n'a pas de valeur, car IE n'ajoute pas le signe égal ( = ) après le nom du cookie. Ce que nous faisons est de vérifier si indexOf ("=") == - 1 , et si c'est le cas, utilisez l'intégralité du cookie comme nom de cookie.
Mohoch

@jahu Et je dirais que c'est aussi dans le domaine public: developer.mozilla.org/en-US/docs/MDN/…
Chronial

52

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

2
toGMTString()est obsolète, utilisez toUTCString()plutôt.
Thanh Nguyen

@NguyenThanh Thx! Mis à jour
artnikpro

1
Parfois, la valeur du cookie lui-même peut contenir un =signe. Dans ce cas, la fonction getCookieproduira un résultat inattendu. Pour éviter cela, envisagez d'utiliser le corps de la fonction de flèche suivante à l'intérieur de réduireconst [n, ...val] = v.split('='); return n === name ? decodeURIComponent(val.join('=')) : r
Dmitriy Zhura

Ce serait bien d'avoir la possibilité de laisser la date d'expiration non définie. Cela permettrait au cookie d'être supprimé automatiquement à la sortie du navigateur.
xji

4
864e5 = 86400000 = 1000*60*60*24représente le nombre de millisecondes dans une journée de 24 heures.
Henrikh Kantuni

41

Cookies JQuery

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

1
Je marque cela principalement parce que vous avez mentionné les cookies JQuery. Je recommanderais cela. Le code est très petit et si vous utilisez déjà JQuery, c'est juste la bonne chose à utiliser.
w0rp

17

Mozilla fournit un cadre simple pour lire et écrire des cookies avec un support complet Unicode ainsi que des exemples d'utilisation.

Une fois inclus sur la page, vous pouvez paramétrer 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 la page document.cookie de Mozilla .

Une version de ce simple fichier js est sur github .


2
Veuillez noter que la bibliothèque de cookies fournie sur MDN est publiée sous GPL, pas LGPL.
Tous les travailleurs sont essentiels du

Quel fichier javascript dois-je importer? Impossible de le trouver :(
AlikElzin-kilaka

Voir la section sous "Bibliothèque" sur cette page: developer.mozilla.org/en-US/docs/Web/API/document/… - vous pouvez l'enregistrer dans un fichier et l'inclure ou le coller dans un fichier js existant où vous souhaitez l'utiliser.
Brendan Nee

Donc pas de fichier javascript autonome? C'est donc un extrait de code - pas une bibliothèque réelle.
AlikElzin-kilaka

Grande entrée! La "bibliothèque" est un fichier .js unique avec environ 80 lignes; c'est ce fichier (sur GitHub): github.com/madmurphy/cookies.js/blob/master/cookies.js
Philipp

8

ES7, en utilisant une expression régulière 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; 
            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)

Utilisation - Cookie.get (nom, valeur [, options]):
options prend en charge toutes les options de cookies standard et ajoute des "jours":

  • path : '/' - tout chemin absolu. Par défaut : emplacement actuel du document,
  • domaine : «sub.example.com» - ne peut pas commencer par un point. Par défaut : hôte actuel sans sous-domaine.
  • sécurisé : vrai - Servir uniquement les cookies sur https. Par défaut : faux.
  • jours : 2 jours avant l'expiration du cookie. Par défaut : fin de session.
    Autres moyens de définir l'expiration:
    • expire : 'Sun, 18 Feb 2018 16:23:42 GMT' - date d'expiration sous forme de chaîne GMT.
      La date actuelle peut être obtenue avec: new Date (Date.now ()). ToUTCString ()
    • 'max-age' : 30 - identique aux jours, mais en quelques secondes au lieu de jours.

D'autres réponses utilisent "expire" au lieu de "max-age" pour prendre en charge les anciennes versions d'IE. Cette méthode nécessite ES7, donc IE7 est de toute façon sorti (ce n'est pas un gros problème).

Remarque: les caractères amusants tels que "=" et "{:}" sont pris en charge en tant que valeurs de cookie, et l'expression régulière gère les espaces blancs de début et de fin (à partir d'autres bibliothèques).
Si vous souhaitez stocker des objets, encodez-les avant et après avec JSON.stringify et JSON.parse, modifiez ce qui précède ou ajoutez une autre méthode. Par exemple:

Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);

Est-ce que les downvoters pourraient bien expliquer ce qui ne va pas avec ma méthode?
SamGoody

1
1. Plus court et IMO plus facile à entretenir. 2. Plus complet (est la seule réponse à accepter sécurisée, n'importe quel ordre d'arguments, max-age). 3. Plus de valeurs par défaut standard (chemin, etc., par défaut à la norme, contrairement à la plupart des réponses ici). 4. Bonne pratique (selon MDN, l'expression régulière est le moyen le plus fiable pour extraire les valeurs). 5. Futureprook (si plus d'options sont ajoutées aux cookies, elles seront conservées). 6. Un objet pollue le code moins qu'un tas de fonctions. 7. Obtenez, définissez et supprimez et ajoutez facilement d'autres méthodes. 8. ES7 (mots à la mode délicieux).
SamGoody

7

Pour ceux qui ont besoin de sauvegarder des objets comme {foo: 'bar'}, je partage ma version modifié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;
    }

}

Alors 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'

5

J'ai déjà utilisé plusieurs fois la réponse acceptée de ce fil. C'est un bon morceau de code: simple et utilisable. Mais j'utilise habituellement babel et ES6 et des modules, donc si vous êtes comme moi, voici le code à copier pour un développement plus rapide avec ES6

Réponse acceptée réécrite en 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 bien sûr varier):

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

5

Voici un code pour obtenir, définir et supprimer des 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/


2

J'utilise cet objet. Les valeurs sont codées, il est donc nécessaire de les prendre en compte lors de la lecture ou de l'écriture 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
};

})();

0

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

0

J'ai utilisé js-cookie pour réussir.

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

0

Vous pouvez utiliser mon module cookie ES pour obtenir / définir / supprimer un cookie.

Usage:

Dans votre balise head, incluez le code suivant:

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

Vous pouvez maintenant utiliser window.cookie pour stocker les informations utilisateur dans les pages Web.

cookie.isEnabled ()

Le cookie est-il activé dans votre navigateur Web?

returns {boolean} true if cookie enabled.

Exemple

if ( cookie.isEnabled() )
    console.log('cookie is enabled on your browser');
else
    console.error('cookie is disabled on your browser');

cookie.set (nom, valeur)

Définissez un cookie.

name: cookie name.
value: cookie value.

Exemple

cookie.set('age', 25);

cookie.get (nom [, valeur par défaut]);

obtenir un cookie.

name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found
Exemple
var age = cookie.get('age', 25);

cookie.remove (nom);

Supprimer le cookie.

name: cookie name.
Exemple
cookie.remove( 'age' );

Exemple d'utilisation


-1

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 cesser dès que vous avez trouvé votre valeur de cookie et renvoyer sa valeur. À mon avis très élégant avec le double split.

Le remplacement sur la condition if est une garniture d'espace blanc, pour vous assurer qu'il correspond correctement


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

-1

J'ai écrit simple cookieUtils, 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;';
    }
};

-1

Voici l'exemple de w3chools qui a été mentionné.

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

-1

Une lecture simple

var getCookie = function (name) {
    var valueStart = document.cookie.indexOf(name + "=") + name.length + 1;
    var valueEnd = document.cookie.indexOf(";", valueStart); 
    return document.cookie.slice(valueStart, valueEnd)
}

-2

Une façon effrontée et simple de lire un cookie pourrait être quelque chose comme:

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

Cela pourrait être utilisé si vous savez que votre cookie contient quelque chose comme: username="John Doe"; id=123;. Notez qu'une chaîne aurait besoin de guillemets dans le cookie. Ce n'est probablement pas la méthode recommandée, mais cela fonctionne pour les tests / l'apprentissage.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.