He estado tratando de averiguar cómo hacer una de las tareas que me dieron durante las últimas 3 horas y parece que no puedo hacerlo.
Esta es la tarea:
Agregue una página de inicio de sesión (login.html) con un formulario de inicio de sesión al sistema. Al iniciar sesión, crea una cookie en la que se guardan el nombre de usuario, la contraseña y la duración de la cookie de inicio de sesión. Mientras haya una cookie de inicio de sesión, se pueden visitar otros sitios. Si la cookie no existe, cambia a login.html desde cualquier página. Al hacer clic en cerrar sesión, se elimina la cookie de inicio de sesión (nos lleva de nuevo a login.html).
este es mi código HTML para el formulario de inicio de sesión:
<form action="index.html" id="loginForm" method="post"> <div> Username: <input type="text" name="uname" id="uname"> </div> <div> Password:<input type="text" name="pwd" id="pwd"> </div> <div> <button type="submit" id="myBtn"> Sign in </button> </div> </form>Espero que alguien me pueda ayudar, me queda poco tiempo. ¡Gracias de antemano! :,)
En mi experiencia, necesita usar PHP y una base de datos porque si solo usa javascript, los usuarios no podrán acceder a sus cuentas si simplemente borran sus cookies.
Perdón por no ser muy perspicaz sobre cómo responder a su pregunta, pero PHP sería el primer paso, alguien más puede explicar cómo configurar PHP, porque no es mi especialidad.
Editar:
<!DOCTYPE html> <html> <head> <script> function setCookie(cname,cvalue,exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for(let i = 0; i < ca.length; i++) { let 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() { let user = getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user != "" && user != null) { setCookie("username", user, 30); } } } </script> </head> <body onload="checkCookie()"></body> </html>fuente del código: w3schools
document.querySelector('#loginForm').addEventListener('submit', () => { setCookie('user', document.querySelector('#uname').value, '/') setCookie('pass', document.querySelector('#pwd').value, '/') }) if(!getCookie('user')||!getCookie('pass')) if(location.href != 'https://somelocation.example/index.html/') location.replace('https://somelocation.example/index.html/') // Cookies setting and getting functions function setCookie(name, value, path, options = {}) { options = { path: path, ...options }; if (options.expires instanceof Date) { options.expires = options.expires.toUTCString(); } let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) for (let optionKey in options) { updatedCookie += "; " + optionKey let optionValue = options[optionKey] if (optionValue !== true) { updatedCookie += "=" + optionValue } } document.cookie = updatedCookie; } function getCookie(name) { let matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )) return matches ? decodeURIComponent(matches[1]) : undefined } Primero, obtenemos la ruta y las opciones que el usuario configuró, luego verificamos si la función de vencimiento está en formato de fecha (por ejemplo, 1653420565221 ), y si es cierto, luego la convertimos a cadena UTC. (Se omitió la parte con for...in loop porque no está en uso) Después de todo, las cookies se configuraron en una nueva.
1.2.1 obtenerCookie:
Simplemente obteniendo y codificando la propiedad de la cookie usando match() , y si no existe, devolviendo undefined .