时间戳

首页 > 解决方案 > 生成查看链接JS

javascript - 生成查看链接JS

问题描述

我有一个静态网站（HTML、CSS、JS），人们可以在其中跟踪他们的时间。

我想要它，以便他们可以生成一个链接，该链接创建一个新的 html 页面来显示他们的时间。我希望此链接可共享，以便其他人可以看到时间。

例如

我给自己计时，享受我想分享的美好时光。我生成了一个链接到该时间的链接，并将其发送给我的朋友，他们单击该链接可以看到时间和与之相关的其他详细信息。

这是可能的，如果是的话，怎么做？

谢谢

标签： javascript

解决方案

我做了一个工作演示，向您展示没有数据库可以做什么，并保持数据不被修改和“安全”。

当您按“共享”时，它会使用btoa JS 函数将您的时间和名称值编码为 url，然后生成一个链接。

当有人去链接时，它会从 URL 中读取参数?time=XXX?name=XXXX，然后使用atob JS 函数对其进行解码，然后设置名称和计时器元素文本以显示在页面上。

注意：删除 first const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla';并取消注释 const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla';以使此代码在您的页面服务器上工作。

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>

推荐阅读