Generate Viewing Link JS

I have a static website (HTML, CSS, JS) where people can keep track of their times.

I would like it so that they can generate a link that creates a new html page to display their time. I would like this link to be shareable, so other people can see the time.

e.g.

I time myself and get a really good time that I would like to share. I generate a link which is linked to that time, and send it to my friends, who on clicking that link can see the time & other details associated with it.

Is this possible, and if it is, how?

Thanks

Answer

I made a working demo to show you what you can do w/o database and keep data unmodified and “secure”.

When you press “share” it encode with btoa JS function your time and name value to url and then generate a link.

When someone go to link, it read the params from URL ?time=XXX?name=XXXX and then decode them with atob JS function then set name et timer elements text to display on page.

NOTE: Remove first const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; and uncomment const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; to make this code work on your page server.

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>