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

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

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

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

這是該概念的簡(jiǎn)單演示。

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

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

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

步驟1：我們必須存儲(chǔ)最后一次重新加載時(shí)間

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

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

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

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

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

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

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

讓ReloadCount = null

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

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

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

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

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

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

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

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

獎(jiǎng)金：讓我們重新付款！

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

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

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

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

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

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

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

然后，我們可以直接在組件模板中訪問計(jì)算屬性。

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

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

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

好的。

總結(jié)

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

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