如何每天只刷新一次页面（加载页面后）单击按钮并使用Javascript打印上次刷新的时间答案

【问题标题】：How to refresh a page only once in a day (after loading the page) on a button click and print the time of last refresh using Javascript如何每天只刷新一次页面（加载页面后）单击按钮并使用Javascript打印上次刷新的时间
【发布时间】：2021-01-05 07:34:32
【问题描述】：

我有一个代码可以在按钮单击时刷新页面，但是当我每天只刷新一次时，它不允许我刷新。有时当我加载页面时，它不允许我刷新页面。

function CheckRefresh(){
  var lastRefresh = new Date(); 
  setInterval(function(){
       var now = new Date();
       if (new Date() - lastRefresh > 1000 * 60 * 60 * 24) { 
                  location.reload();
       }

   },60000);
                                           //Console.log(lastrefresh);
}

&lt;button type="button" data-toggle="tooltip" onClick="CheckRefresh()" data-placement="bottom" class="btn-shadow mr-3 btn btn-dark"&gt;Refresh&lt;/button&gt;

我已经在 StackOverflow 上提到过与此相关的帖子。

【问题讨论】：

您需要某种持久存储来执行此操作。您可以使用 cookie 执行此操作 - 如果未设置 cookie 或 cookie > 24h 中的刷新时间：允许刷新

标签： javascript html refresh page-refresh

【解决方案1】：

这个应该工作，虽然我无法测试它，因为你不允许在第三方网站上设置 cookie。

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <button id="refresh" type="button" data-toggle="tooltip" data-placement="bottom" class="btn-shadow mr-3 btn btn-dark">Refresh</button>

  <script>
    const setRefreshCookie = () => {
      const now = new Date();
      const tomorrow = new Date();
      /*
       * if you want the cookie to expire after 24 hours from the last click
       * on the refresh button, you use only 'tomorrow.setTime()' otherwise,
       * if you want the cookie to expire as soon as the date changes (even if
       * 24 hours have not passed yet) you use both 'tomorrow.setTime()' and
       * 'tomorrow.setHours()'
       */
      tomorrow.setTime(now.getTime() + 1000 * 60 * 60 * 24);
      tomorrow.setHours(0, 0, 0, 0);

      document.cookie = 'preventRefesh=true;expires=' + tomorrow.toUTCString() + 'domain=yourdomain.tld;path=/path/to/page';
    };

    const checkRefreshCookie = () => {
      return document.cookie.split('; ').some(cookie => cookie.split('=')[0] === 'preventRefesh');
    };
    
    const refreshBtn = document.getElementById('refresh');
    const isRefreshCookieSet = checkRefreshCookie();

    document.addEventListener('load', () => {
      if (isRefreshCookieSet ) {
        /*
         * disable the button, so that the user has a visual feedback
         */
        refreshBtn.setAttribute('disabled', true);
      }
    });

    refreshBtn.addEventListener('click', (event) => {
      if (!isRefreshCookieSet ) {
        setRefreshCookie();
        // location.reload();
        console.log('refeshing the page...');
      }
      event.preventDefault();
      event.stopPropagation();
    });
  </script>
</body>

</html>

【讨论】：

是的，它工作正常，但是当我刷新浏览器刷新按钮时，一切都从第一次开始，即刷新按钮将再次启用，有什么解决方案吗？这将是一个很大的帮助。
我想要这样一种方式，无论如果有人使用按钮刷新，那么即使我们刷新浏览器或重新加载页面，该按钮也应该全天禁用
@sreeshasudhev 您无法阻止本机刷新事件。
@sreeshasudhev，您可以将禁用页面按钮的逻辑从按钮单击事件移动到文档加载事件（为此我更新了 sn-p），但您不能 - 而且您不应阻止用户使用浏览器工具栏按钮刷新页面。
但如果它部署在服务器中并且许多用户加载网页。刷新按钮将被启用 na