頁面重新加載是一回事。有時，當我們認為它沒有反應或認為可用的新內(nèi)容時，我們會刷新頁面。有時，我們只是在丹格網(wǎng)站和憤怒的狂歡中生氣，讓它知道我們不高興。

知道用戶何時刷新頁面會不會很高興嗎？不僅如此，還有多少次？這些數(shù)據(jù)可以幫助我們觸發(fā)一定數(shù)量的重新加載後觸發(fā)某種行為。

體育網(wǎng)站就是一個很好的例子。如果我想檢查正在進行的遊戲的分數(shù)，但分數(shù)沒有實時更新，那麼我可能會發(fā)現(xiàn)自己會刷新一堆。

我們的目標是將用戶擺脫這種習慣。由於實時得分更新，我們將使用我們的頁面刷新計數(shù)功能，讓人們知道刷新是不必要的。如果他們重新加載超過三次？我們將踢出他們的會議。那會向他們展示。

這是該概念的簡單演示。

讓我們一起重新創(chuàng)建它。但是在我們開始之前，在開始編碼之前，我們需要回答一些問題：

• 我們?nèi)绾螆猿钟脩糁匦录虞d網(wǎng)站的次數(shù)？我們需要一個地方來保持用戶重新加載網(wǎng)站的次數(shù)（重新彙編），這個地方需要在重新加載之間持續(xù)該值 - LocalStorage聽起來像是一個很好的解決方案。
• 我們?nèi)绾螜z測用戶是重新加載網(wǎng)站還是在幾個小時後又回來？如果我們將重新充電量存儲在LocalStorage中，它將持續(xù)重新加載之間的值，但是它將保留該值，直到我們以編程方式刪除或清除瀏覽器存儲為止。這意味著，如果我們在幾個小時後回來，該網(wǎng)站仍然會記住上次重新彙編，並且可能會在第一次刷新後進行註銷而無需警告。我們希望避免這種情況，並允許用戶每次用戶在一段時間後返回兩次。最後一句話是問題的答案。我們需要存儲用戶離開網(wǎng)站的時間，然後在網(wǎng)站再次加載時檢查何時發(fā)生的時間。如果那個時間段不夠長，我們會激活重新加載計數(shù)邏輯。
• 我們怎麼知道用戶何時離開網(wǎng)站？要存儲這段時間，我們使用theNolload窗口事件並將該值存儲在LocalStorage中。

好的，現(xiàn)在我們有了答案，讓我們深入了解代碼。

步驟1：我們必須存儲最後一次重新加載時間

我們將使用ununload窗口事件存儲上次重新加載的時間。我們需要兩件事：（1）事件偵聽器，該偵聽器將收聽事件並觸發(fā)適當?shù)姆椒?，以及?）我們的nunloadhandler方法。

首先，讓我們創(chuàng)建一個稱為initializerEloadCount的函數(shù)，該函數(shù)將使用窗口對像上的AddeventListener方法設置我們的事件偵聽器。

函數(shù)oniroctializerEeloAdcount（）{
  window.AddeventListener（“ theNunload”，totunloadHandler）
}

然後，我們創(chuàng)建第二種方法，該方法將在離開網(wǎng)站之前被觸發(fā)。此方法將節(jié)省刷新在localstorage中發(fā)生的時間。

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

步驟2：我們需要一種處理和存儲重新加載計數(shù)的方法

既然我們有時間上次關(guān)閉，我們可以繼續(xù)並實施負責檢測和計算網(wǎng)站重新加載多少次的邏輯。我們需要一個變量來保留我們的重新負載，並告訴我們用戶重新加載網(wǎng)站的次數(shù)。

讓ReloadCount = null

然後，在我們的InitializerEeloAdcount功能中，我們需要做兩件事：

1. 檢查我們是否已經(jīng)在LocalStorage中存儲了一個重新彙編值，如果是的，請獲取該值並將其保存在我們的重新彙編中。如果值不存在，則意味著用戶首次加載了站點（或者至少沒有重新加載它）。在這種情況下，我們將重新匯總設置為零，並將該值保存到LocalStorage。
2. 檢測是否重新加載站點，或者在更長的時間後返回站點。這是我們需要lastunloadat值的地方。要檢測該站點是否實際重新加載，我們需要比較站點加載（當前時間）的時間與lastunloadat值。如果這兩個發(fā)生在五秒鐘內(nèi)（完全是任意的），則意味著用戶重新加載了站點，我們應該運行重新加載量邏輯。如果這兩個事件之間的時間段更長，我們將重置重新彙編值。

這樣，讓我們??創(chuàng)建一個稱為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>在此步驟中，我們需要的最後一個功能是負責當我們確認用戶重新加載網(wǎng)站時發(fā)生的方法。我們將該功能稱為onReLoDeTed，在其中，我們會增加重新彙編的值。如果用戶第三次刷新站點，我們將炸彈撥打並撥打我們的註銷邏輯。</p><pre rel="JavaScript">函數(shù)onReloAddetected（）{
  ReloadCount = ReloAdcount 1
  localstorage.setItem（“ ReloadCount”，ReloadCount）
  if（reloAdcount === 3）{
    logout（）
  }
}

步驟3：“親愛的用戶，為什麼您不聽？！”

在此步驟中，儘管我們明確警告了停止這樣做，但我們將用戶重新加載站點重新加載到違反三個限制閾值的地步時實現(xiàn)了邏輯。

發(fā)生這種情況時，我們調(diào)用我們的API將用戶登錄，然後清理與重新加載計數(shù)邏輯相關(guān)的所有屬性。這將使用戶能夠返回並擁有重新加載的清潔帳戶。我們還可以將用戶重定向到某個地方，例如登錄屏幕。 （但是將它們發(fā)送到這裡不是很有趣嗎？）

函數(shù)註銷（params）{
  //註銷API調(diào)用
  ResetreloAdcount（）
}

函數(shù)ResetreloAdcount（）{
  window.removeeventlistener（“ toferunload”，toferunloadHandler）
  localstorage.removeitem（“ lastunloadat”）
  localstorage.removeitem（“ ReloAdcount”）;
}

獎金：讓我們重新付款！

現(xiàn)在，我們已經(jīng)實現(xiàn)了邏輯，讓我們看看如何基於此示例將該邏輯移至VUE網(wǎng)站：

首先，我們需要將所有變量移動到組件的數(shù)據(jù)中，這是所有反應性道具的壽命。

導出默認{
  數(shù)據(jù)（） {
    返回 {
      重新載體：0，
      警告：[...]
    }
  }，，

然後，我們將所有功能移至方法。

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

由於我們使用VUE及其反應性系統(tǒng)，因此我們可以刪除所有直接的DOM操作（例如document.getElementById（“ app”）。innerHTML），並依賴於我們的警告信息數(shù)據(jù)屬性。為了顯示正確的警告消息，我們需要添加一個計算的屬性，該屬性每次更改我們的重新彙編時都會重新計算，以便我們可以從警告信息中返回字符串。

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

然後，我們可以直接在組件模板中訪問計算屬性。

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

我們需要做的最後一件事是找到一個適當?shù)牡胤郊せ铑A防邏輯。 VUE帶有組件生命週鉤，這些鉤子正是我們需要的，特別是創(chuàng)建的鉤子。讓我們放入它。

 // ...
  創(chuàng)建（）{
    this.InitializerEloAdcount（）;
  }，，
// ...

好的。

總結(jié)

正是這樣，檢查併計算一個頁面刷新了多少次的邏輯。希望您喜歡這次旅行，您會發(fā)現(xiàn)這種解決方案有用，或者至少鼓舞人心做得更好。 ？

以上是將用戶擺脫過多習慣的一種方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！