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

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

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

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

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

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 .

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

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'

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

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/

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

})();

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

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>

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

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

cookie.remove (nom);

Supprimer le cookie.

name: cookie name.

cookie.remove( 'age' );

Exemple d'utilisation

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

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

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

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

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.