web-dev-qa-db-fra.com

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

Comment créer et lire une valeur de cookie en JavaScript?

javascriptcookies
229
Venkatesh Appala

Voici des 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 "";
}
211
Srinivas Sabbani

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);
      }
   }
}
39
Paul McCowat

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

Mozilla fournit un simple cadre pour la lecture et l’écriture de cookies avec une prise en charge complète de l’unicode , ainsi que des exemples d’utilisation.

Une fois inclus sur la page, vous pouvez créer 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 .

14
Brendan Nee

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 ses modules, donc si vous êtes comme moi, voici le code à copier pour accélérer le développement avec ES6

Réponse acceptée réécrite sous forme de 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';
6
Lukas

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

}

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'
6
Angel

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

Source: http://mycodingtricks.com/snippets/javascript/javascript-cookies/

4
Shubham Kumar

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 supporte toutes les options de cookies standard et ajoute "jours": 

  • chemin: '/' - n'importe quel chemin absolu. Par défaut: emplacement actuel du document, 
  • domain: 'sub.example.com' - ne peut pas commencer par un point. Par défaut: hôte actuel sans sous-domaine.
  • secure: true - N'utilise le cookie que via https. Par défaut: false.
  • jours: 2 - jours jusqu'à l'expiration du cookie. Par défaut: Fin de session.
    Autres méthodes de réglage de l'expiration:
    • expires: 'Dim, 18 février 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 au nombre de jours, mais en secondes au lieu de plusieurs jours.

D'autres réponses utilisent "expires" au lieu de "max-age" pour prendre en charge les anciennes versions IE. Cette méthode nécessite ES7, donc IE7 est désactivé (ce n'est pas grave).

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 de début et de fin (des autres bibliothèques).
Si vous souhaitez stocker des objets, encodez-les avant et après avec et 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);
3
SamGoody

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

})();
2
sinuhepop

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
naamadheya

Vous pouvez utiliser mon cookie ES module 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éfinir un cookie.

name: cookie name.
value: cookie value.

Exemple

cookie.set('age', 25);

cookie.get (name [ defaultValue]);

obtenir un cookie.

name: cookie name.
defaultValue: cookie default value. Default is undefined.
returns cookie value or defaultValue if cookie was not found

var age = cookie.get('age', 25);

cookie.remove (nom);

Supprimer le cookie.

name: cookie name.

cookie.remove( 'age' );

Exemple d'utilisation

0
Andrej

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
Greg