将用户摆脱过多习惯的一种方法

页面重新加载是一回事。有时，当我们认为它没有反应或认为可用的新内容时，我们会刷新页面。有时，我们只是在丹格网站和愤怒的狂欢中生气，让它知道我们不高兴。

知道用户何时刷新页面会不会很高兴吗？不仅如此，还有多少次？这些数据可以帮助我们触发一定数量的重新加载后触发某种行为。

体育网站就是一个很好的例子。如果我想检查正在进行的游戏的分数，但分数没有实时更新，那么我可能会发现自己会刷新一堆。

我们的目标是将用户摆脱这种习惯。由于实时得分更新，我们将使用我们的页面刷新计数功能，让人们知道刷新是不必要的。如果他们重新加载超过三次？我们将踢出他们的会议。那会向他们展示。

这是该概念的简单演示。

让我们一起重新创建它。但是在我们开始之前，在开始编码之前，我们需要回答一些问题：

• 我们如何坚持用户重新加载网站的次数？我们需要一个地方来保持用户重新加载网站的次数（重新汇编），这个地方需要在重新加载之间持续该值 - LocalStorage听起来像是一个很好的解决方案。
• 我们如何检测用户是重新加载网站还是在几个小时后又回来？如果我们将重新充电量存储在LocalStorage中，它将持续重新加载之间的值，但是它将保留该值，直到我们以编程方式删除或清除浏览器存储为止。这意味着，如果我们在几个小时后回来，该网站仍然会记住上次重新汇编，并且可能会在第一次刷新后进行注销而无需警告。我们希望避免这种情况，并允许用户每次用户在一段时间后返回两次。最后一句话是问题的答案。我们需要存储用户离开网站的时间，然后在网站再次加载时检查何时发生的时间。如果那个时间段不够长，我们会激活重新加载计数逻辑。
• 我们怎么知道用户何时离开网站？要存储这段时间，我们使用theNolload窗口事件并将该值存储在LocalStorage中。

好的，现在我们有了答案，让我们深入了解代码。

步骤1：我们必须存储最后一次重新加载时间

我们将使用ununload窗口事件存储上次重新加载的时间。我们需要两件事：（1）事件侦听器，该侦听器将收听事件并触发适当的方法，以及（2）我们的nunloadhandler方法。

首先，让我们创建一个称为initializerEloadCount的函数，该函数将使用窗口对象上的AddeventListener方法设置我们的事件侦听器。

函数oniroctializerEeloAdcount（）{
  window.AddeventListener（“ theNunload”，totunloadHandler）
}

然后，我们创建第二种方法，该方法将在离开网站之前被触发。此方法将节省刷新在localstorage中发生的时间。

函数theunloadhandler（）{
  localstorage.setItem（“ lastunloadat”，Math.floor（date.now（） / 1000））
  window.removeEventListener（“ toferunload”，theunloadHandler）;
}

步骤2：我们需要一种处理和存储重新加载计数的方法

既然我们有时间上次关闭，我们可以继续并实施负责检测和计算网站重新加载多少次的逻辑。我们需要一个变量来保留我们的重新负载，并告诉我们用户重新加载网站的次数。

让ReloadCount = null

然后，在我们的InitializerEeloAdcount功能中，我们需要做两件事：

1. 检查我们是否已经在LocalStorage中存储了一个重新汇编值，如果是的，请获取该值并将其保存在我们的重新汇编中。如果值不存在，则意味着用户首次加载了站点（或者至少没有重新加载它）。在这种情况下，我们将重新汇总设置为零，并将该值保存到LocalStorage。
2. 检测是否重新加载站点，或者在更长的时间后返回站点。这是我们需要lastunloadat值的地方。要检测该站点是否实际重新加载，我们需要比较站点加载（当前时间）的时间与lastunloadat值。如果这两个发生在五秒钟内（完全是任意的），则意味着用户重新加载了站点，我们应该运行重新加载量逻辑。如果这两个事件之间的时间段更长，我们将重置重新汇编值。

这样，让我们​​创建一个称为CheckReload的新功能，并将该逻辑保留在此处。

功能CheckReload（）{
  if（localstorage.getItem（“ ReloAdcount”））{
    reloadcount = parseint（localstorage.getItem（“ ReloAdcount”））
  } 别的 {
    重新充电= 0
    localstorage.setItem（“ ReloadCount”，ReloadCount）
  }
  如果 （
    Math.floor（date.now（） / 1000）-localstorage.getItem（“ lastunloadat”）<p>在此步骤中，我们需要的最后一个功能是负责当我们确认用户重新加载网站时发生的方法。我们将该功能称为onReLoDeTed，在其中，我们会增加重新汇编的值。如果用户第三次刷新站点，我们将炸弹拨打并拨打我们的注销逻辑。</p><pre rel="JavaScript">函数onReloAddetected（）{
  ReloadCount = ReloAdcount 1
  localstorage.setItem（“ ReloadCount”，ReloadCount）
  if（reloAdcount === 3）{
    logout（）
  }
}

步骤3：“亲爱的用户，为什么您不听？！”

在此步骤中，尽管我们明确警告了停止这样做，但我们将用户重新加载站点重新加载到违反三个限制阈值的地步时实现了逻辑。

发生这种情况时，我们调用我们的API将用户登录，然后清理与重新加载计数逻辑相关的所有属性。这将使用户能够返回并拥有重新加载的清洁帐户。我们还可以将用户重定向到某个地方，例如登录屏幕。 （但是将它们发送到这里不是很有趣吗？）

函数注销（params）{
  //注销API调用
  ResetreloAdcount（）
}

函数ResetreloAdcount（）{
  window.removeeventlistener（“ toferunload”，toferunloadHandler）
  localstorage.removeitem（“ lastunloadat”）
  localstorage.removeitem（“ ReloAdcount”）;
}

奖金：让我们重新付款！

现在，我们已经实现了逻辑，让我们看看如何基于此示例将该逻辑移至VUE网站：

首先，我们需要将所有变量移动到组件的数据中，这是所有反应性道具的寿命。

导出默认{
  数据（） {
    返回 {
      重新载体：0，
      警告：[...]
    }
  }，，

然后，我们将所有功能移至方法。

 // ...
  方法： {
    totunloadhandler（）{...}，
    checkReload（）{...}，
    logout（）{...}，
    OnReloAddetected（）{...}，
    resetreloadcount（）{...}，
    ritionizerEeloAdcount（）{...}
  }
// ...

由于我们使用VUE及其反应性系统，因此我们可以删除所有直接的DOM操作（例如document.getElementById（“ app”）。innerHTML），并依赖于我们的警告信息数据属性。为了显示正确的警告消息，我们需要添加一个计算的属性，该属性每次更改我们的重新汇编时都会重新计算，以便我们可以从警告信息中返回字符串。

计算：{
  警告（）{
    返回this.warningmessages [this.reloadcount];
  }
}，，

然后，我们可以直接在组件模板中访问计算属性。

 
  <div>
    <p> {{warningMessage}} </p>
  </div>

我们需要做的最后一件事是找到一个适当的地方激活预防逻辑。 VUE带有组件生命周钩，这些钩子正是我们需要的，特别是创建的钩子。让我们放入它。

 // ...
  创建（）{
    this.InitializerEloAdcount（）;
  }，，
// ...

好的。

总结

正是这样，检查并计算一个页面刷新了多少次的逻辑。希望您喜欢这次旅行，您会发现这种解决方案有用，或者至少鼓舞人心做得更好。 ？

以上是将用户摆脱过多习惯的一种方法的详细内容。更多信息请关注PHP中文网其他相关文章！