Autor Tema: crear cookies con JavaScript y cómo borrarlas o mostrar document.cookie CU01188E  (Leído 3106 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola nuevamente. Aquí dejo mi solución. A partir del siguiente código...

Código: [Seleccionar]
function createCookie(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+"="+value+expires+"; path=/";
}
 
function eraseCookie(name) { createCookie(name,"",-1); }


Citar
a) ¿Para qué sirve la función createCookie? Explica paso a paso qué es lo que hace esta función.

Sirve como su nombre indica para crear una cookie. Esta función recibe tres datos, name,value y days. Si days contiene algo se ejecutará el if y se crea una fecha tomando la fecha actual y sumándole los días que contenga el 'days' que será la fecha de expiración de la cookie, si 'days' no contuviese un valor válido, la cookie se crearía igualmente con la única diferencia de que cuando se cierre el navegador la cookie se borrará.


Citar
b) ¿Para qué sirve la función eraseCookie? Explica paso a paso qué es lo que hace esta función.

Sirve para borrar una cookie, especificandole el name de dicha cookie. Lo que hace es invocar a la función createCookie() enviandole como valor de dias '-1',de esta manera se creará una cookie con la fecha de expiración ya rebasada y esta se borrará automaticamente.


Citar
c) Escribe el código de una función de nombre mostrarTodasLasCookies() que muestre el nombre y valor de todas las cookies existentes. Por ejemplo, si hay dos cookies deberá mostrarse algo como esto:

Hay 2 cookies en el documento

Cookie 1 con nombre: cookieNombreUsuario y valor: Alberto
Cookie 2 con nombre cookieEdadUsuario y valor 8

d) Usando las funciones createCookie, eraseCookie y  mostrarTodasLasCookies() crea un script que pida 3 nombres y valores de cookies al usuario, y cree las cookies correspondientes. A continuación deberá mostrar las cookies existentes y sus valores. Finalmente, deberá borrar la última cookie existente y volver a mostrar todas las cookies y sus valores.


Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com JavaScript CU01188E</title><meta charset="utf-8">
<style>
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px;
cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
</style>
<script type="text/javascript">
function createCookie(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+"="+value+expires+"; path=/";
}
function eraseCookie(name) { createCookie(name,"",-1); }
function mostrarTodasLasCookies(){
var misCookies = [];
misCookies = document.cookie.split(';');
var msg = 'Actualmente hay ' + misCookies.length + ' cookies en el documento.<br/>';
for(var i=0; i<misCookies.length; i++){
msg += 'Cookie nº' + (i+1) + ' con nombre: ' + misCookies[i].split('=',1) + ' y valor: ';
var nombre = misCookies[i].split('=',1) + '=';
var valor = misCookies[i];
msg += valor.substring(nombre.length,valor.length) + '<br/>';
}
return msg;
}
function pedirDatosCookies(){
var nombre = [], valor = [];
for (i=0; i<3; i++){
nombre[i] = prompt('Inserte el nombre para la cookie número ' + (i+1) + ': ');
valor[i] = prompt('Insete el valor para la cookie número ' + (i+1) + ': ');
createCookie(nombre[i], valor[i], 1);
}
document.getElementById('contenedorCookies').innerHTML = 'Lista de cookies: <br/>' + mostrarTodasLasCookies() + '<br/><br/>';
var misCookies = document.cookie.split(';');
document.getElementById('contenedorCookies').innerHTML += 'Ahora borraremos la última cookie creada, que es: ' + misCookies[misCookies.length-1];
eraseCookie(misCookies[misCookies.length-1].split('=', 1));
document.getElementById('contenedorCookies').innerHTML += '<br/><br/>La lista de cookies queda asi: <br/>' + mostrarTodasLasCookies();
}
</script>
</head>
<body>
<h3>Crearemos 3 cookies e interactuaremos sobre ellas</h3>
<div id ="pulsador" onclick="pedirDatosCookies()"> Probar </div>
<div id="contenedorCookies"></div>
</body>

Saludos.
« Última modificación: 17 de Febrero 2016, 11:11 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Buenos días Pedro

Sobre el ejercicio decirte que lo veo todo correcto. Buen nivel!

Por otro lado agradecerte que estés colaborando en los foros respondiendo consultas y revisando ejercicios de otras personas.

Aprovecho para felicitarte por estar terminando el curso JavaScript, creo que es un curso que requiere bastante trabajo pero al mismo tiempo entretenido y proporciona unas muy buenas bases de JavaScript.

Comentarte que como complemento o extensión a JavaScript tenemos Ajax, curso que hemos incorporado hace poco a la web y cuyo seguimiento también recomiendo pues es una tecnología muy interesante e importante en los desarrollos web. No obstante, para seguir el curso Ajax se debe haber seguido el curso php previamente (también disponible en la web), o tener conocimientos de programación con algún otro lenguaje del lado del servidor.

Saludos

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola Mario.

Gracias a vosotros que nos dais la oportunidad de aprender y poder mostrar lo aprendido en este gran foro.

Gracias también por las felicitaciones, pero aún me queda un poquito para acabar.  ;D. Lastima no tener mas tiempo.

En cuanto a lo de seguir, la idea que tenía era continuar con PhP. Así que Ajax lo dejaré para mas adelante.

Saludos.


 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".