Tambah nilai halaman adalah satu perkara. Kadang -kadang kita menyegarkan halaman apabila kita fikir ia tidak bertindak balas, atau percaya bahawa kandungan baru tersedia. Kadang-kadang kita hanya marah di tapak dang dan kemarahan-refresh untuk memberitahu ia kita tidak senang.

Tidak senang mengetahui bila pengguna menyegarkan halaman? Bukan hanya itu, tetapi berapa kali? Data itu dapat membantu kita mencetuskan beberapa tingkah laku selepas beberapa tambah nilai.

Tapak sukan adalah contoh yang baik. Jika saya ingin menyemak skor permainan yang sedang berjalan tetapi skor tidak hidup-dimatikan, maka saya mungkin mendapati diri saya menyegarkan sekumpulan.

Matlamat kami adalah untuk memecahkan pengguna daripada kebiasaan itu. Kami akan menggunakan kuasa penghitungan semula halaman kami untuk membiarkan orang tahu bahawa penyegaran tidak perlu, terima kasih kepada kemas kini skor masa nyata. Dan jika mereka memuat semula lebih daripada tiga kali? Kami akan menendang keluar dari sesi mereka. Itu akan menunjukkan kepada mereka.

Berikut adalah demo mudah konsep itu.

Mari buat semula bersama-sama. Tetapi sebelum kita pergi, terdapat beberapa soalan yang perlu kita jawab sebelum kita mula pengekodan:

• Bagaimanakah kita dapat meneruskan bilangan pengguna yang dimuat semula di laman web ini? Kami memerlukan tempat untuk menyimpan bilangan kali pengguna memuat semula tapak (ReloadCount), tempat ini perlu berterusan nilai antara tambah nilai - LocalStorage terdengar seperti penyelesaian yang baik.
• Bagaimanakah kita mengesan jika pengguna memuat semula laman web atau hanya kembali selepas beberapa jam? Sekiranya kami menyimpan ReloadCount di LocalStorage, ia akan mengekalkan nilai antara tambah nilai, tetapi ia akan menyimpan nilai itu sehingga kami menghapuskan secara pemrograman atau membersihkan penyimpanan penyemak imbas. Ini bermakna jika kita kembali selepas beberapa jam laman web ini masih ingat ReloadCount terakhir dan boleh melakukan logout selepas menyegarkan pertama tanpa amaran. Kami mahu mengelakkannya dan membenarkan pengguna memuat semula tapak dua kali setiap kali pengguna kembali selepas beberapa tempoh masa. Kalimat terakhir itu memegang jawapan kepada soalan itu. Kami perlu menyimpan masa apabila pengguna meninggalkan tapak dan kemudian apabila tapak dimuat sekali lagi periksa apabila itu berlaku. Jika tempoh masa itu tidak cukup lama, kami mengaktifkan logik pengiraan semula.
• Bagaimana kita tahu bila pengguna meninggalkan laman web ini? Untuk menyimpan masa itu, kami menggunakan acara tetingkap sebelum ini dan menyimpan nilai yang di LocalStorage.

Ok, sekarang kita mempunyai jawapan, mari kita menyelam ke dalam kod.

Langkah 1: Kita mesti menyimpan masa tambah nilai terakhir

Kami akan menyimpan masa tambah nilai terakhir menggunakan acara tetingkap sebelum ini. Kami memerlukan dua perkara: (1) pendengar acara yang akan mendengar peristiwa dan api kaedah yang sesuai, dan (2) kaedah kami sebelum ini.

Pertama, mari kita buat fungsi yang dipanggil InitialiserEloadCount yang akan menetapkan pendengar acara kami menggunakan kaedah AddEventListener pada objek tetingkap.

 fungsi initierizereloadCount () {
  Window.AddEventListener ("Sebelum Sunload", Sebelumnya MUNGKIN)
}

Kemudian kami membuat kaedah kedua yang akan dipecat sebelum kami meninggalkan laman web ini. Kaedah ini akan menjimatkan masa penyegaran berlaku di LocalStorage.

 fungsi sebelum ini muat turun () {
  localStorage.setItem ("lastunloadat", math.floor (date.now () / 1000))
  window.removeEventListener ("sebelum ini", sebelum iniDander);
}

Langkah 2: Kami memerlukan cara untuk mengendalikan dan menyimpan kiraan tambah nilai

Sekarang kita mempunyai masa apabila tapak ditutup terakhir, kita boleh meneruskan dan melaksanakan logik yang bertanggungjawab untuk mengesan dan mengira berapa kali laman web itu dimuat semula. Kami memerlukan pembolehubah untuk memegang ReloadCount kami dan memberitahu kami berapa kali pengguna memuatkan semula laman web ini.

 Biarkan ReloadCount = Null

Kemudian, dalam fungsi InitialiserEloadCount kami, kita perlu melakukan dua perkara:

1. Semak jika kami sudah mempunyai nilai ReloadCount yang disimpan di LocalStorage kami, dan jika ya, dapatkan nilai itu dan simpannya di ReloadCount kami. Jika nilai tidak wujud, ini bermakna pengguna memuatkan tapak untuk kali pertama (atau sekurang -kurangnya tidak memuat semula). Dalam hal ini, kami menetapkan ReloadCount kepada sifar dan menyimpan nilai itu ke LocalStorage.
2. Mengesan jika tapak dimuat semula atau pengguna kembali ke tapak selepas tempoh masa yang lebih lama. Ini adalah tempat di mana kita memerlukan nilai terakhir kita. Untuk mengesan jika tapak itu sebenarnya dimuat semula, kita perlu membandingkan masa apabila tapak dimuatkan (masa semasa) dengan nilai LastunLoadat. Sekiranya kedua -dua mereka berlaku di dalamnya, katakan, lima saat (yang benar -benar sewenang -wenangnya), itu bermakna pengguna memuat semula laman web dan kami harus menjalankan logik kiraan semula. Jika tempoh masa antara kedua -dua peristiwa itu lebih lama, kami menetapkan semula nilai ReloadCount.

Dengan itu, mari buat fungsi baru yang dipanggil CheckReload dan simpan logik itu di sana.

 fungsi checkReload () {
  jika (localStorage.getItem ("ReloadCount")) {
    ReloadCount = ParseInt (localStorage.getItem ("ReloadCount"))
  } else {
    ReloadCount = 0
    localStorage.setItem ("ReloadCount", ReloadCount)
  }
  jika (
    Math.floor (date.now () / 1000) - localStorage.getItem ("lastunloadat") <p> Fungsi terakhir yang kita perlukan dalam langkah ini adalah kaedah yang bertanggungjawab untuk apa yang berlaku apabila kami mengesahkan bahawa pengguna memuat semula tapak tersebut. Kami panggil fungsi itu onreloadDetected, dan di dalamnya, kami meningkatkan nilai ReloadCount. Jika pengguna menyegarkan laman web ketiga kali, kami menjatuhkan bom dan memanggil logik logout kami.</p><pre rel="JavaScript"> fungsi onreloadDetected () {
  ReloadCount = ReloadCount 1
  localStorage.setItem ("ReloadCount", ReloadCount)
  jika (reloadcount === 3) {
    logout ()
  }
}

Langkah 3: "Pengguna yang terhormat, mengapa anda tidak mendengar?!"

Dalam langkah ini, kami melaksanakan logik yang bertanggungjawab untuk keadaan apabila pengguna memuatkan semula tapak tersebut ke titik melanggar ambang tiga batas kami, walaupun amaran kami yang jelas untuk berhenti melakukannya.

Apabila itu berlaku, kami memanggil API kami untuk log keluar pengguna, maka kami membersihkan semua sifat yang berkaitan dengan logik kiraan tambah nilai. Itu akan membolehkan pengguna kembali dan mempunyai akaun yang bersih untuk tambah nilai. Kami juga boleh mengalihkan pengguna di suatu tempat yang berguna, seperti skrin log masuk. (Tetapi tidakkah lucu untuk menghantarnya ke sini?)

 fungsi logout (params) {
  // Panggilan API Logout
  ResetReloadCount ()
}

fungsi resetReloadCount () {
  Window.RemoveEventListener ("Sebelum Sunload", Sebelum SunLoadHandler)
  localStorage.RemoveItem ("LastUnloadat")
  localStorage.removeItem ("ReloadCount");
}

Bonus: Mari kita kembali!

Sekarang kita mempunyai logik yang dilaksanakan, mari kita lihat bagaimana dapat memindahkan logik itu ke tapak Vue berdasarkan contoh ini:

Pertama, kita perlu memindahkan semua pembolehubah kita ke dalam data komponen kita, di mana semua alat reaktif hidup.

 Eksport Lalai {
  data () {
    kembali {
      ReloadCount: 0,
      WarningMessages: [...]
    }
  },

Kemudian kami memindahkan semua fungsi kami ke kaedah.

 // ...
  Kaedah: {
    SebelumNoLoadHandler () {...},
    checkReload () {...},
    logout () {...},
    onReloadDetected () {...},
    ResetReloadCount () {...},
    InisierIserEloadCount () {...}
  }
// ...

Oleh kerana kita menggunakan Vue dan sistem kereaktifannya, kita boleh menggugurkan semua manipulasi DOM langsung (contohnya Document.GetElementById ("APP"). InnerHTML) dan bergantung kepada harta data WARNINGMESSAGES kami. Untuk memaparkan mesej amaran yang betul, kami perlu menambah harta yang dikira yang akan dikira semula setiap kali ReloadCount kami diubah supaya kami dapat mengembalikan rentetan dari amaran kami.

 dikira: {
  WarningMessage () {
    kembali ini.warningmessages [this.reloadcount];
  }
},

Kemudian kami boleh mengakses harta yang dikira kami secara langsung dalam templat komponen.

 <pemat>
  <dana>
    <p> {{WarningMessage}} </p>
  
</dana></pemat>

Perkara terakhir yang perlu kita lakukan ialah mencari tempat yang betul untuk mengaktifkan logik pencegahan tambah nilai. Vue datang dengan cangkuk kitaran hayat komponen yang betul -betul apa yang kita perlukan, khususnya cangkuk yang dicipta. Mari kita jatuhkannya.

 // ...
  dicipta () {
    this.initializerEloadCount ();
  },
// ...

Bagus.

Membungkus

Dan di sana, logik yang memeriksa dan mengira berapa kali halaman telah disegarkan. Saya harap anda menikmati perjalanan dan anda mendapati penyelesaian ini berguna atau sekurang -kurangnya memberi inspirasi untuk melakukan sesuatu yang lebih baik. ?

Atas ialah kandungan terperinci Salah satu cara untuk memecahkan pengguna dari kebiasaan tambah nilai terlalu banyak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!