Question

我有一个按模式打开搜索表单的按钮（#search-modal）但我想只允许访问者每天进行3次搜索。如果他第四次点击按钮，会出现不同的模态，通知他当天无法使用搜索。

这是我到目前为止所做的：

  var count = 3,
  $btn = $('form button');

  $btn.click(function(){
      count--;
      if(count<0) {
            $('#search-blocked').appendTo("body").modal('show');                
      }
      else {
            $('#search-modal').appendTo("body").modal('show');                
      }      
  });

并且效果很好，但是，当您刷新页面时，计数器会被重置。我想知道有人可以帮助我使用cookie解决方案，让计数器每天计算点击次数（我知道cookie不是最理想的解决方案，但现在已经足够了）

谢谢你！

Answer 1

您可以将其值存储在本地存储中。

function getCount() {
    var localStorageCount = localStorage.getItem("count");

    if (localStorageCount !== null)
        return +localStorageCount;

    return 3; // initial value
}

function setCount(newValue) {
    localStorage.setItem("count", newValue);
}

$btn = $('form button');

$btn.click(function() {
    var count = getCount();

    if (count === 0) {
        $('#search-blocked').appendTo("body").modal('show');
        return;
    }

    // Do all your search things here
    $('#search-modal').appendTo("body").modal('show');                
    setCount(--count);
});

我已将count getter / setter的逻辑封装到函数中，以便您可以更改此逻辑或切换到会话存储/ cookie /等。

JSFiddle demo is available。

使用此解决方案count值存储在用户的本地存储中，并在关闭/刷新页面后生效。
阅读更多about local storage at MDN。

请注意，前端方式都不能提供足够的安全性任何有经验的用户都可以清除存储空间并根据需要进行尽可能多的搜索。

每天jquery点击计数器

1 个答案: