リロードしすぎるという習慣からユーザーを分解する1つの方法

ページのリロードは何かです。それが反応しないと思うとき、または新しいコンテンツが利用可能であると信じるとき、私たちは時々私たちはページを更新します。時々、私たちはDangのサイトに怒って、Rage-Refreshが私たちが不満を抱いていることを知らせます。

ユーザーがいつページをリフレッシュするかを知るのはいいことではありませんか？それだけでなく、何回？そのデータは、特定の数のリロード後に何らかの動作をトリガーするのに役立ちます。

スポーツサイトは良い例です。進行中のゲームのスコアをチェックしたいが、スコアがライブアップデートされていない場合は、束をリフレッシュしていることに気付くかもしれません。

私たちの目標は、ユーザーをその習慣から分割することです。リアルタイムスコアの更新のおかげで、ページリフレッシュカウントパワーを使用して、リフレッシュが不要であることを人々に知らせます。そして、彼らが3回以上リロードする場合は？私たちは彼らのセッションから追い出されます。それはそれらを示します。

その概念の簡単なデモです。

一緒に再作成しましょう。しかし、私たちが行く前に、コーディングを開始する前に答える必要がある質問はほとんどありません。

• ユーザーがサイトをリロードした回数をどのように維持できますか？ユーザーがサイトをリロードした回数（reloadcount）を維持する場所が必要です。この場所は、リロード間でその価値を持続する必要があります。
• ユーザーがサイトをリロードしたか、数時間後に戻ってきたかどうかをどのように検出しますか？ ReloadCountをLocalStorageに保存すると、リロード間の値が維持されますが、プログラムで削除するか、ブラウザストレージをクリアするまでその値を保持します。つまり、数時間後に戻ってきた場合、サイトはまだ最後のreloadCountを覚えており、警告なしに最初の更新後にログアウトを実行する可能性があることを意味します。私たちはそれを避け、ユーザーがしばらく後に戻ってくるたびにユーザーが2回サイトをリロードできるようにしたいと考えています。その最後の文は、質問に対する答えを保持しています。ユーザーがサイトを離れた時間を保存する必要があります。その後、サイトが再度ロードされたときに、それが起こったときにチェックする必要があります。その期間が十分に長くなかった場合、リロードカウントロジックをアクティブにします。
• ユーザーがいつサイトを離れるかをどのようにして知ることができますか？その時間を保存するには、[前のウィンドウイベントを使用し、その価値をLocalStorageに保存します。

さて、答えができたので、コードに飛び込みましょう。

ステップ1：最後のリロード時間を保存する必要があります

アンロード前のウィンドウイベントを使用して、最後のリロードの時間を保存します。 （1）イベントを聴き、適切な方法を発射するイベントリスナーと（2）前のUnloadhandlerメソッド。

まず、WindowオブジェクトのAddEventListenerメソッドを使用してイベントリスナーを設定するInitialIzerEloAdCountという関数を作成しましょう。

 function initializeLoAdcount（）{
  window.addeventlistener（ "beforeunload"、beforeunloadhandler）
}

次に、サイトを離れる前に起動される2番目の方法を作成します。この方法は、LocalStorageでリフレッシュが発生する時間を節約します。

 unloadhandler（）beffore beforefunce
  localStorage.setItem（ "lastunloadat"、math.floor（date.now（） / 1000）））
  window.removeeventlistener（ "beforeunload"、beforeunloadhandler）;
}

ステップ2：リロードカウントを処理して保存する方法が必要です

サイトが最後に閉鎖された時間があるので、サイトのリロードされた回数を検出およびカウントする責任のあるロジックを進めて実装できます。リロッドカウントを保持し、ユーザーがサイトをリロードした回数を教えてくれる変数が必要です。

 reloadcount = nullとします

次に、initializereloadcount関数では、2つのことを行う必要があります。

1. LocalStorageに既にリロードカウント値が保存されているかどうかを確認してください。もしそうなら、その価値を取得してReloadCountに保存してください。値が存在しない場合、ユーザーが初めてサイトをロードしたことを意味します（または少なくともリロードしませんでした）。その場合、reloadCountをゼロに設定し、その価値をLocalStorageに保存します。
2. サイトがリロードされているかどうかを検出するか、ユーザーが長期にわたってサイトに戻ってきたかどうかを検出します。これは、LastUnloadat値が必要な場所です。サイトが実際にリロードされているかどうかを検出するには、サイトがロードされた時間（現在の時刻）とLastUnloadat値を比較する必要があります。たとえば、5秒（これは完全にarbitrary意的です）でこれらの2つが発生した場合、ユーザーがサイトをリロードしたことを意味し、リロードカウントロジックを実行する必要があります。これら2つのイベントの間の期間が長い場合、リロードカウント値をリセットします。

それで、CheckReloadという新しい関数を作成し、そのロジックをそこに保持しましょう。

関数checkreload（）{
  if（localstorage.getitem（ "reloadcount"））{
    reloadcount = parseint（localstorage.getitem（ "reloadcount"））
  } それ以外 {
    reloadcount = 0
    localstorage.setItem（ "reloadcount"、reloadcount）
  }
  もし （
    math.floor（date.now（） / 1000）-localstorage.getitem（ "lastunloadat"）<p>このステップで必要な最後の関数は、ユーザーがサイトをリロードしたことを確認したときに何が起こるかを担当する方法です。その関数をOnreloAddetectedと呼び、その内部では、reloadCountの値を増やします。ユーザーが3回目のサイトを更新した場合、爆弾をドロップしてログアウトロジックを呼び出します。</p><pre rel="JavaScript"> function onreloAddeTected（）{
  reloadcount = reloadcount 1
  localstorage.setItem（ "reloadcount"、reloadcount）
  if（reloadcount === 3）{
    logout（）
  }
}

ステップ3：「親愛なるユーザー、なぜ聞かなかったのですか？」

このステップでは、ユーザーがサイトをリロードして、それを停止するという明確な警告にもかかわらず、3限度のしきい値に違反するポイントまでサイトをリロードするときのロジックを実装します。

それが起こったら、APIを呼び出してユーザーをログアウトし、リロードカウントロジックに関連するすべてのプロパティをクリーンアップします。これにより、ユーザーが戻ってきて、リロードをきれいに説明することができます。また、ログイン画面のように、ユーザーをどこかに便利な場所にリダイレクトすることもできます。 （しかし、代わりにここに送るのは面白くないでしょうか？）

 function logout（params）{
  // logout API呼び出し
  resetreloadcount（）
}

function resetreloadcount（）{
  window.removeeventlistener（ "beforeunload"、beforeunloadhandler）
  localstorage.removeitem（ "lastunloadat"）
  localStorage.RemoveItem（ "reloadcount"）;
}

ボーナス：それを再利用しましょう！

ロジックが実装されたので、この例に基づいて、そのロジックをVUEサイトにどのように移動できるかを見てみましょう。

まず、すべての変数をコンポーネントのデータに移動する必要があります。このデータは、すべてのリアクティブな小道具が住んでいます。

デフォルトのエクスポート{
  データ（） {
    戻る {
      reloadcount：0、
      警告マッセージ：[...]
    }
  }、

次に、すべての機能をメソッドに移動します。

 // ...
  方法：{
    beforeunloadhandler（）{...}、
    checkreload（）{...}、
    logout（）{...}、
    onreloAddeTected（）{...}、
    ResetreloAdCount（）{...}、
    initializeLoAdCount（）{...}
  }
// ...

VUEとその反応性システムを使用しているため、すべての直接DOM操作（document.getElementByID（ "APP"）。NENNEHTMLなど）をドロップし、警告Messagesデータプロパティに依存できます。適切な警告メッセージを表示するには、再確認されるたびに再計算する計算されたプロパティを追加する必要があります。

計算：{
  警告message（）{
    this.warningmessages [this.reloadcount];
  }
}、

次に、コンポーネントのテンプレートで、計算されたプロパティに直接アクセスできます。

 
  <div>
    <p> {{warningMessage}} </p>
  </div>
テンプレート>

最後に行う必要があることは、リロード予防ロジックをアクティブにする適切な場所を見つけることです。 Vueには、まさに必要なものであるコンポーネントライフサイクルフック、特に作成されたフックが付属しています。それを落としましょう。

 // ...
  created（）{
    this.InitializerEloAdcount（）;
  }、
// ...

ニース。

まとめます

そして、それは、ページが更新された回数をチェックしてカウントするロジックです。あなたが乗車を楽しんだことを願っています、そしてあなたはこのソリューションが役に立つか、少なくとももっと良いことをするために刺激的であると思うことを願っています。 ？

以上がリロードしすぎるという習慣からユーザーを分解する1つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。