javascript - 使用 Cookie 防止用户点击链接两次

Question

如果其中的链接将其 URL 存储在 cookie 中，我会尝试阻止添加 .activeAdv 类，如果用户单击链接，则会添加此 Cooke，所以基本上我会尝试阻止返回用户单击同一链接两次。

默认情况下，链接隐藏在 div 下方，该 div 在添加 .activeAdv 类时会产生动画，从而显示链接。

当前代码以及项目的 codepen 示例如下。我猜我需要将 activeAdv addClass 包装在 IF 条件中:

• 获取子链接的 href 值
• 检查是否存在匹配的 Cookie
• 仅在条件返回 false 时添加 .activeAdv

我认为我的想法是正确的，并且已经在点击链接时设置了 cookie，但我正在努力处理 IF 语句，有人可以帮忙吗？

http://codepen.io/Jambob/pen/wKyoRr

        <article>
             <div id="on-1" class="box">
                 <h2>1 dec</h2>
             </div>
             <div class="present">
                content
               <a href="http://www.google.com">www.google.com</a>
             </div>
         </article>


    // Checks for content within .present, if TRUE adds .activeAdv animation class
    $(".present").filter(function(){
        return $(this).html().trim().length > 0;
    }).parent().addClass('activeAdv');


    // When link clicked, store its URL in cookie
    $( ".present a" ).click(function() {
       $.cookie($(this).attr('href'), true);
    });

    if ( '(".present").html().trim().length > 0;' ) {
        if ( '(".present a").attr("href")' === "http://www.google.com") {
            $(this).parent().addClass('activeAdv');
        }
    }

经过一番思考，我想出了一个不同的 IF 语句，它可能是正确的

    // Checks if content exists
    if ( '(".present").html().trim().length > 0;' ) {

        // Checks if HREF of child link matches existing cookie (using a string for testing)
        if ( '(".present a").attr("href")' === "http://www.google.com") {
            $(this).parent().addClass('activeAdv');
        }
    }

Answer 1

因此，如果 :visited CSS 伪类不够(它与访问的链接匹配)，您可以使用 localStorage，它更致力于此目的。我创建了可以在 Firebug 控制台运行的脚本，并为未访问的链接着色:

(function(links) {
  // Load visited links from local storage
  var visited = JSON.parse(localStorage["visited"]||"[]");
  // Safety check
  if(!visited instanceof Array) {
      visited = []; 
      localStorage["visited"] = [];
  }

  function setClassToLinks() {
    links.each(function(){
      // Remember state - asume not visited
      var linkVisited = false;


      // Check for inner HTML
      if(this.innerHTML.trim().length > 0) {
          // Check if in list of visited links
          if(visited.indexOf(this.href)==-1)
            linkVisited = true;
          else
            console.log("Already visited: "+this.href);
      }
      else
          // Skip empty links
          return console.log("No inner HTML.");
      // Reset color
      this.style.color = !linkVisited?"":"red";
      // And remove class 
      if(linkVisited)
          $(this).removeClass("activeAdv");
      else
          $(this).addClass("activeAdv");
    })
  }
  setClassToLinks();
  // When link clicked, store its URL in LocalStorage
  links.click(function() {
     // Prevent duplicities
     if(visited.indexOf(this.href)==-1) {
         visited.push(this.href);
         localStorage["visited"] = JSON.stringify(visited);
     }
  });
  // [OPTIONAL] Update links realtime - triggers when local storage changes
  window.addEventListener('storage', function (event) {
      if(event.key=="visited") {
          visited = JSON.parse(localStorage["visited"]||"[]");
          // Change CSS
          setClassToLinks();
      }
  });

})($("a"));

我的解决方案的一个优点是，当您在不同的选项卡中浏览时，链接会自动更新(前提是该选项卡已运行脚本)。

visited 数组可能会快速增长，这就是为什么我认为 cookie 是一个坏主意。