检查 link 是否在过去一天被点击

Question

我正在尝试使用本地 html 和 Jquery 为自己制作一个简单的个人主页。我添加了一个 link 去 Bing 奖励。

<a id="bing" href="https://www.bing.com/rewards/dashboard">Bing Rewards</a>

但是，我只想每天访问这个网站一次。当我点击它时，我希望它隐藏到第二天。

$('#bing').click(function(){
   $(this).hide();
}

当我关闭并重新打开页面时，我该如何让它知道我上次访问 link 的时间，并基于此显示 link 或不是？我对这类事情很陌生，所以答案越简单越好。谢谢！

Answer 1

在此方法中，最后一次点击的日期（从午夜开始）存储在本地存储中 (demo)

$(function() {
  var oneDay = 8.64e7, // 24 hours in milliseconds
    lastClicked = localStorage.getItem('bing-time'),
    showLink = new Date().getTime() > lastClicked + oneDay;
  $('#bing').toggle(showLink);
  if (showLink) {
    $('#bing').on('click', function() {
      var date = new Date();
      // set time to midnight
      date.setHours(0,0,0,0);
      localStorage.setItem('bing-time', date);
      $(this).hide();
    });
  }

  // reset localstorage - for demo
  $('button').click(function() {
    localStorage.removeItem('bing-time');
  });
});

Answer 2

您可以将点击时间存储在cookie 中。使用像 js-cookie 这样的库会容易得多。

$('#bing').click(function() {
    $(this).hide();

    // set cookies to expire in 14 days
    Cookies.set('bing-click-time', new Date(), {
        expires : 14
    });
});
var clickTime = Cookies.get('bing-click-time');
if (clickTime != undefined) {
    var cTime = new Date(clickTime);
    var diff = new Date().getTime() - cTime.getTime();
    console.log(clickTime, cTime, cTime.getTime(), diff / (1000 * 60))
    if (diff / (1000 * 60) < 3) {// eg: less than 3 min
        $('#bing').hide();
    }
}

Answer 3

以下将在页面加载时隐藏或显示按钮并在 localStorage 中存储时间。

如果页面要长时间保持打开状态，您需要运行一个间隔计时器来检查日期差异

var lastBing = localStorage.getItem('last_bing'),
    now = new Date(),
    showButton = true;       
if (lastBing) {
    lastBing = new Date(+lastBing);
    showButton = lastBing.setDate(lastBing.getDate() + 1) < now;
}

$('#bing').click(function() {
    localStorage.setItem('last_bing', +new Date());
    $(this).hide();
}).toggle(showButton);

检查 link 是否在过去一天被点击

Check if a link has been clicked in the past day

html

jquery

click

hyperlink

show-hide