Définir et récupérer un cookie avec JavaScript

Question

Détails

Source Version non AMP Editer

Définir et récupérer un cookie avec JavaScript

J&#8217essaie de définir un cookie en fonction du fichier CSS que je choisis dans mon HTML. J'ai un formulaire avec une liste d'options, et différents fichiers CSS comme valeurs. Lorsque je choisis un fichier, il doit être enregistré dans un cookie pendant environ une semaine. La prochaine fois que vous ouvrirez votre fichier HTML, ce sera le fichier précédent que vous aurez choisi.

Code JavaScript :

function cssLayout() {
    document.getElementById("css").href = this.value;
}

function setCookie(){
    var date = new Date("Februari 10, 2013");
    var dateString = date.toGMTString();
    var cookieString = "Css=document.getElementById("css").href" + dateString;
    document.cookie = cookieString;
}

function getCookie(){
    alert(document.cookie);
}

Code HTML :

<form>
    Select your css layout:<br>
    <select id="myList">
        <option value="style-1.css">CSS1</option>
        <option value="style-2.css">CSS2</option>  
        <option value="style-3.css">CSS3</option>
        <option value="style-4.css">CSS4</option>
    </select>
</form>

Aaron Martin

Question modifiée 1er mars 2018 в 9:53

Programmation

javascript html cookies css

28 janvier 2013 в 11:34

18 vues

B T · Answer 1 · 2013-07-08T08:18:27+00:00

Ce sont de bien bien meilleures références que w3schools (la plus horrible référence web jamais créée) :

[Comment fonctionnent les cookies (quirksmode.org)][1]
[MDN document.cookie] [2]

Exemples dérivés de ces références :

// sets the cookie cookie1
document.cookie =
 'cookie1=test; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/'

// sets the cookie cookie2 (cookie1 is *not* overwritten)
document.cookie =
 'cookie2=test; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/'

// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

La référence Mozilla contient même une belle bibliothèque de cookies que vous pouvez utiliser.

[1] : http://www.quirksmode.org/js/cookies.html [2] : https://developer.mozilla.org/en-US/docs/Web/API/document.cookie

Dan · Answer 2 · 2014-06-04T11:09:51+00:00

Je suis sûr que cette question devrait avoir une réponse plus générale avec un code réutilisable qui fonctionne avec des cookies comme paires clé-valeur.

Cet extrait est tiré de [MDN][1] et est probablement digne de confiance. Il s'agit d'un objet sécurisé par l'UTF pour travailler avec des cookies :

var docCookies = {
  getItem: function (sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!sKey || !this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

Mozilla a effectué des tests pour prouver que cela fonctionne dans tous les cas.

Il existe un autre extrait [ici][2] :

[1] : https://developer.mozilla.org/en-US/docs/Web/API/document.cookie [2] : http://mdn.beonex.com/en/DOM/document.cookie.html

Munish Poonia · Answer 3 · 2013-01-29T00:20:54+00:00

Consultez [JavaScript Cookies on W3Schools.com][1] pour définir et obtenir les valeurs des cookies via JS.

Utilisez simplement les méthodes setCookie et getCookie qui y sont mentionnées.

Ainsi, le code ressemblera à quelque chose comme :


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

function cssSelected() {
    var cssSelected = $('#myList')[0].value;
    if (cssSelected !== "select") {
        setCookie("selectedCSS", cssSelected, 3);
    }
}

$(document).ready(function() {
    $('#myList')[0].value = getCookie("selectedCSS");
})
</script>
<select id="myList" onchange="cssSelected();">
    --Select--
    CSS1
    CSS2
    CSS3
    CSS4