Tengo un sitio web estático (HTML, CSS, JS) donde las personas pueden realizar un seguimiento de sus tiempos.
Me gustaría que puedan generar un enlace que cree una nueva página html para mostrar su tiempo. Me gustaría que este enlace se pueda compartir, para que otras personas puedan ver la hora.
p.ej
Me tomo el tiempo y me lo paso muy bien y me gustaría compartirlo. Genero un enlace que está vinculado a esa hora y se lo envío a mis amigos, quienes al hacer clic en ese enlace pueden ver la hora y otros detalles asociados con ella.
¿Es esto posible, y si lo es, cómo?
Gracias
Hice una demostración de trabajo para mostrarle lo que puede hacer sin una base de datos y mantener los datos sin modificar y "seguros".
Cuando presiona "compartir", codifica con la función btoa JS su valor de tiempo y nombre en la URL y luego genera un enlace.
Cuando alguien va al enlace, lee los parámetros de la URL ?time=XXX?name=XXXX y luego los decodifica con la función atob JS y luego establece el texto de los elementos de nombre y temporizador para mostrar en la página.
NOTA: elimine la primera const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; y elimine el comentario const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; para hacer que este código funcione en su servidor de página.
window.onload = function() { let timerEl = document.getElementById('timer'); let nameEl = document.getElementById('name'); const queryString = '?time=MTBtMjFz&name=U2FtIEJaRVo='; //Get the time parameter index.html?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla" from URL (encoded with javascript) //Uncomment next line in production //const queryString = window.location.search; if (queryString !== '') { const urlParams = new URLSearchParams(queryString); const time = urlParams.get('time'); const name = urlParams.get('name'); timerEl.innerText = window.atob(time); nameEl.innerText = window.atob(name) } let share = document.getElementById('share'); share.addEventListener('click', function(e) { //Generate URL document.getElementById('sharelink').innerText = 'http://example.com/timer.html?time=' + window.btoa(timerEl.innerText) + '&name=' + window.btoa(nameEl.innerText); }); } <!-- Consider this page URL is http://example.com/timer.html --> <main> <h1>I'm <span id="name"></span></h1> <h2> My time is: <span id="timer"></span></h2> <button id="share">Share my time !</button> <h3 id="sharelink"></h3> </main>si solo necesita mostrar el tiempo y no preocuparse por la seguridad, puede usar obtener parámetros. Haces una URL como: yoursite.com/time?time=20 y en tu página de tiempo:
function findGetParameter(parameterName) { var result = null, tmp = []; location.search .substr(1) .split("&") .forEach(function (item) { tmp = item.split("="); if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); }); return result; } // Your time as stored in this variable. var time = findGetParameter("time");pero recomiendo una base de datos con lenguaje del lado del servidor como PHP, NODE o .NET.