10

Hola estoy tratando de crear el código que controlan el tiempo de validez de una sesion , para que el navegador recuerde la web y no tenga que cargarla cada vez que la recargo, pero eso no di en un curso que hice. He buscado información al respecto y con el código que cree veo que el navegador no recuerda la web. He leído algo sobre los parámetros expires y max-age, pero no se ni como ni donde debo de colocarlas. Muestro lo conseguido hasta ahora, pero que no hace la función que esperaba para que el navegador recuerde mi web. Si pueden ayudarme, hay algún sitio donde pueda encontrar la forma de aprender a escribir el código y donde ponerlo, o explicarme como debo proceder. También me sugirieron que busque documentación de localStorage es nativo JS, pero he buscado y con lo que vi, no soy capaz de crear el código para conseguir que los navegadores recuerden la web. La cosa es que tarda mucho en cargar, y ya corregí los errores que tenia que hacia que fuera lenta. Y por mas que la abro una y otra vez, me vuelve a mostrar el mensaje de cookies y carga todo desde nuevo Gracias.

function getCookie(c_name) {
      var c_value = document.cookie;
      var c_start = c_value.indexOf(" " + c_name + "=");
      if (c_start == -1) {
        c_start = c_value.indexOf(c_name + "=");
      }
      if (c_start == -1) {
        c_value = null;
      } else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
          c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start, c_end));
      }
      return c_value;
    }

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

    if (getCookie('tiendaaviso') != "1") {
      document.getElementById("cookies").style.display = "block";
    }
    function PonerCookie() {
      setCookie('tiendaaviso', '1', 365);
      document.getElementById("cookies").style.display = "none";
    }
#cookies {
	background-color: #333;
	display:none;
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
	padding-bottom:60px;
	width:100%;
	text-align:center;
	min-height:40px;
	background-color: rgba(0, 0, 0, 0.5);
	color:#fff;
	z-index:99999;
}

.inner {
	width:100%;
	position:absolute;
	padding-left:5px;
	font-family:verdana;
	font-size:12px;
	top:30%;
}

.inner a.ok {padding:4px;color:#00ff2e;text-decoration:none;}
.inner a.info {padding-left:5px;text-decoration:none;color:#faff00;}
<!DOCTYPE html>
<html lang="es">

<head>
<title>cokies</title>
</head>
<body>
  <div id="cookies">
    <div class="inner">
      Esta web utiliza cookies como datos estad&iacute;sticos de su navegaci&oacute;
      Si contin&uacute;a navegando consideramos que acepta el uso de cookies.
      <a href="javascript:void(0);" class="ok" onclick="PonerCookie();">
        <b>OK</b>
      </a> |
      <a href="politica-cookies.html" target="_blank" class="info">M&aacute;s informaci&oacute;n</a>
    </div>
  </div>
  </body>
  </html>

15
  • 1
    que errores te da en la consola? (presiona F12 en chrome) Commented el 30 mar. 2018 a las 18:10
  • 1
    las cookies tienen un parámetro extra llamado path que depende de la ruta de la pagina, es la misma pagina que no lee la cookie? o es otra pagina que esta en otra ruta ? ej: /index.html y /productos/index.html Commented el 30 mar. 2018 a las 19:21
  • 1
    también en la consola puedes probar las funciones y ver que funcionen (setCookie y getCookie). para ver si esta guardando algo en el mismo f12 vas a la pestaña aplicacion y a la izquierda tienes storage->cookies Commented el 30 mar. 2018 a las 19:23
  • 2
    Por una de esas casualidades, ¿no estarás haciendo las pruebas offline? Es decir, las cookies son un mecanismo HTTP y no funcionan con el protocolo file:/// Commented el 3 abr. 2018 a las 15:59
  • 1
    @gemita entiendo haces un sitio web, mencionas sesión... pero que tecnologías adicionales a html/css/js estás usando para tu sitio, en que tipo de servidor estás publicando tu página? pareciera que tu problema es de caché y no de una sesión como tal, menos de cookies, pero no tengo la seguridad por que no me es tan claro si usas o no una tecnología de servidor Commented el 5 abr. 2018 a las 7:00

2 respuestas 2

7
+25

El código proporcionado es funcional siempre y cuando el javascript lo cargues o ejecutes luego de que el div "cookies" sea creado de lo contrario la línea

document.getElementById("cookies").style.display = "block";

dará un error pues el elemento con ID "cookies" no existe aún en el DOM

para manejo de cookies las funciones que usas están bien, para mayor compatibilidad sugiero la libreria de Mozilla que la podes encontrar aqui: https://github.com/madmurphy/cookies.js

El parámetro expires está siendo puesto por la funcion setCookie (toma una cantidad de días y se los suma a la fecha actual)

function setCookie(c_name, value, exdays) {

en resumen el código debería quedar asi:

<!DOCTYPE html>
<html lang="es">
<head>
<title>cokies</title>
<style>
#cookies {
    background-color: #333;
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    padding-bottom:60px;
    width:100%;
    text-align:center;
    min-height:40px;
    background-color: rgba(0, 0, 0, 0.5);
    color:#fff;
    z-index:99999;
}

.inner {
    width:100%;
    position:absolute;
    padding-left:5px;
    font-family:verdana;
    font-size:12px;
    top:30%;
}

.inner a.ok {padding:4px;color:#00ff2e;text-decoration:none;}
.inner a.info {padding-left:5px;text-decoration:none;color:#faff00;}
</style>
</head>
<body>
  <div id="cookies">
   <div class="inner">
  Esta web utiliza cookies como datos estad&iacute;sticos de su navegaci&oacute;
  Si contin&uacute;a navegando consideramos que acepta el uso de cookies.
  <a href="javascript:void(0);" class="ok" onclick="PonerCookie();">
    <b>OK</b>
  </a> |
  <a href="politica-cookies.html" target="_blank" class="info">M&aacute;s informaci&oacute;n</a>
</div>
</div>
</body>
<script>
function getCookie(c_name) {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1) {
    c_start = c_value.indexOf(c_name + "=");
  }
  if (c_start == -1) {
    c_value = null;
  } else {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1) {
      c_end = c_value.length;
    }
    c_value = unescape(c_value.substring(c_start, c_end));
  }
  return c_value;
}

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

if (getCookie('tiendaaviso') != "1") {
  document.getElementById("cookies").style.display = "block";
}
function PonerCookie() {
  setCookie('tiendaaviso', '1', 365);
  document.getElementById("cookies").style.display = "none";
}
</script>
</html>

Nótese que el javascript está siendo cargado después de que aparece

<div id="cookies"> 

en el html.

Edit: Cómo agregar el aviso de cookies a mi web.

(o como romper todo en 3 pasos si no hago copia de los archivos)

Para agregar este código a tu web, primero deberás averiguar cual es el archivo de la página principal. Los nombres más comunes son (ordenados de mas común a mas raro):

  • index.html
  • index.htm
  • index.php
  • default.html
  • default.htm
  • index.shtml
  • index.php5
  • index.php4
  • index.php3
  • index.cgi
  • home.html
  • home.htm
  • Index.html
  • Index.htm
  • Index.shtml
  • Index.php
  • Index.cgi
  • Default.html
  • Default.htm
  • Home.html
  • Home.htm
  • placeholder.html

Nota: en algunos servidores la primer letra en mayúsculas es importante por eso aparecen repetidos algunos.

Una vez localizado el archivo hay que:

  • descargarlo
  • hacer una copia por si nos liamos y se rompe todo
  • abrirlo en un editor de texto

... y buscar la línea donde dice:

</head>

que puede estar cerca o pegada a la linea que diga

<body>

Ahora bien por encima de </head> y sin reemplazar nada de lo que ya hay

Pegas esta parte del código:

<style>
#cookies {
    background-color: #333;
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    padding-bottom:60px;
    width:100%;
    text-align:center;
    min-height:40px;
    background-color: rgba(0, 0, 0, 0.5);
    color:#fff;
    z-index:99999;
}

.inner {
    width:100%;
    position:absolute;
    padding-left:5px;
    font-family:verdana;
    font-size:12px;
    top:30%;
}

.inner a.ok {padding:4px;color:#00ff2e;text-decoration:none;}
.inner a.info {padding-left:5px;text-decoration:none;color:#faff00;}
</style>

Luego buscas una linea que diga:

</body>

Nota: suele estar al final del archivo

Aquí vamos a agregar una primera parte por encima y otra por debajo

A por arriba

<div id="cookies">
   <div class="inner">
  Esta web utiliza cookies como datos estad&iacute;sticos de su navegaci&oacute;
  Si contin&uacute;a navegando consideramos que acepta el uso de cookies.
  <a href="javascript:void(0);" class="ok" onclick="PonerCookie();">
    <b>OK</b>
  </a> |
  <a href="politica-cookies.html" 
     target="_blank" class="info">M&aacute;s informaci&oacute;n</a>
 </div>
 </div>

B Por debajo:

<script>
function getCookie(c_name) {
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1) {
    c_start = c_value.indexOf(c_name + "=");
  }
  if (c_start == -1) {
    c_value = null;
  } else {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1) {
      c_end = c_value.length;
    }
    c_value = unescape(c_value.substring(c_start, c_end));
  }
  return c_value;
}

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

if (getCookie('tiendaaviso') != "1") {
  document.getElementById("cookies").style.display = "block";
}
function PonerCookie() {
  setCookie('tiendaaviso', '1', 365);
  document.getElementById("cookies").style.display = "none";
}
</script>
1
  • 1
    Muchas gracias alo Malbarez Ha sido la mejor explicación que he encontrado. Siempre cargaba nuevamente el banner.
    – Pedro Luis
    Commented el 23 mar. 2020 a las 16:32
2

Ademas de lo ya expuesto por @alo Malbarez, es importante hacer notar que debes activar las cookies en tu navegador de lo contrario producirá un efecto al planteado en tu pregunta.

Para activar las cookies:

en Chrome:

  1. En tu computadora, abre Chrome.
  2. En la parte superior derecha, haz clic en (los 3 puntos) y luego Configuración.
  3. En la parte inferior, haz clic en Configuración avanzada.
  4. En la sección "Privacidad y seguridad", haz clic en Configuración de contenido.
  5. Haz clic en Cookies.
  6. Activa o desactiva Permitir que todos los sitios guarden y lean datos de cookies.

en Firefox:

  1. Las ultimas versiones de firefox no permiten desactivar las cookies :((

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.