使用Cookies防止用户点击链接两次

Use Cookies to prevent user clicking link twice

本文关键字：两次 链接 Cookies 用户 使用      更新时间：2023-09-26

我试图防止类。activeadv被添加，如果链接内有它的URL存储在cookie中，如果用户点击链接，这个烹饪被添加，所以基本上我试图停止返回用户点击相同的链接两次。

默认情况下，链接隐藏在div下面，当添加。activeadv类时，div会显示链接。

当前的代码是下面随着项目的代码依赖的例子。我猜我需要将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');
        }
    }

因此，如果: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是一个坏主意。

相关文章：