read - Configurar cookie y obtener cookie con JavaScript

expires cookie javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo creo y leo un valor desde una cookie? 16 respuestas

Estoy tratando de establecer una cookie dependiendo de qué archivo CSS elijo en mi HTML. Tengo un formulario con una lista de opciones y diferentes archivos CSS como valores. Cuando elijo un archivo, debería guardarse en una cookie durante aproximadamente una semana. La próxima vez que abra su archivo HTML, debe ser el archivo anterior que ha elegido.

Código de 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);
}

Código 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>

Answer 1

Encuentro que el siguiente código es mucho más simple que cualquier otra cosa:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+''=; Max-Age=-99999999;'';  
}

Ahora, llamando a funciones

setCookie(''ppkcookie'',''testcookie'',7);

var x = getCookie(''ppkcookie'');
if (x) {
    [do something with x]
}

Fuente: http://www.quirksmode.org/js/cookies.html

Ellos actualizaron la página hoy, por lo que todo en la página debería ser el último a partir de ahora.

Answer 2

Estas son referencias mucho mejores que w3schools (la referencia web más horrible jamás realizada):

• http://www.quirksmode.org/js/cookies.html
• MDN document.cookie

Ejemplos derivados de estas referencias:

// sets the cookie cookie1
document.cookie =
 ''cookie1=test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/''

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

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

La referencia de Mozilla incluso tiene una biblioteca de cookies agradable que puedes usar.

Answer 3

Estoy seguro de que esta pregunta debería tener una respuesta más general con algún código reutilizable que funciona con las cookies como pares clave-valor.

Este fragmento de código está tomado de MDN y probablemente sea confiable. Este es un objeto UTF-seguro para trabajar con 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 tiene algunas pruebas para probar que esto funciona en todos los casos.

Hay un fragmento alternativo here :

Answer 4

Verifique las cookies de JavaScript en W3Schools.com para configurar y obtener valores de cookies a través de JS.

Solo usa los métodos setCookie y getCookie mencionados allí.

Entonces, el código se verá algo como:

<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();">
    <option value="select">--Select--</option>
    <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>