Bagaimana untuk menyimpan maklumat sesi pengguna apabila pengguna menutup tapak web
P粉725827686
P粉725827686 2024-03-21 21:13:51
0
1
485

Saya cuba membina fungsi sesi main semula pengguna untuk tapak web dan saya menggunakan perpustakaan rrweb untuk melakukan ini.

Apa yang dilakukan oleh perpustakaan ini ialah semasa merakam: ia menangkap semua acara dalam halaman web dan saya boleh menghantarnya ke fungsi main semula, yang mengendalikan main semula sesi, dengan menyimpannya dalam array 中来保存这些事件,当我想重播会话时,我只需将 array .

Pada masa ini untuk tujuan ujian, saya menyimpan tatasusunan ini dalam sessionStorage 中,每次发出新事件时,我都会获取 array 然后将该新事件推送到其中,然后再次将 sessionStorage 保存在我的 sessionStorage saya seperti ini: < /p>

rrweb.record({
    emit(event) {
        const sessions = JSON.parse(sessionStorage.getItem('sessions')) || [];
        sessions.push(event);
        sessionStorage.setItem('sessions', JSON.stringify(sessions));
    },
});

Namun, untuk pengeluaran, saya tidak mahu menyimpan tatasusunan itu dalam butang sessionStorage 中,然后在每次发出新事件时更新它,而是将该 array 保存在我的数据库中,并且我想调用保存 array 的函数当用户 退出 或用户决定关闭网站时(例如按 X saya), sekali ke pangkalan data saya.

Bahagian pertama - apabila pengguna logs out - 非常简单,我只需在 logout 按钮上添加一个 eventListener , inilah bahagian kedua - apabila pengguna memutuskan untuk menutup tapak - ini membuatkan saya sedikit sakit kepala.

Saya tahu ada beforeUnload 事件,但是经过快速搜索后,我清楚地意识到它是不可靠的,所以基本上我正在寻找的是一种可靠的方法来确定用户何时关闭我的网站,以便我可以触发 async函数 会将 array disimpan ke pangkalan data saya.

P粉725827686
P粉725827686

membalas semua(1)
P粉492959599

Berikut ialah pendapat saya tentang cara mengurangkan ketidakbolehpercayaan peristiwa beforeunload:

  1. Dapatkan dan simpan sessions 数组中的当前条目数。假设我们正在讨论您希望重播的单个页面,则可以将此计数保存为 JavaScript 变量 eventCount apabila halaman pertama kali dimuatkan. Adalah lebih baik untuk mendapatkan kiraan daripada jadual sisi pelayan sekiranya atas sebab tertentu kali terakhir halaman ditutup ia tidak berjaya menyimpan semua acara yang dilog.
  2. Penjadualan menggunakan tetingkap setiap N 秒调用一次函数 checkEvents(您必须决定调用此函数的频率)setInterval 方法。此函数将查看当前事件计数(变量 newCount),如果大于当前 eventCount 值,则 Navigator sendBeacon 方法可用于向服务器发送请求,传递所有自上次调用以来添加的事件(即 JSON.stringify(sessions.slice(eventCount, newCount)) ,并且当请求完成时分配 eventCount = newCount if newCount 为 > eventCount。请注意,当异步 sendBeacon 请求运行时,可能会生成新事件,这就是我们更新事件计数的原因使用 newCount 而不是 sessions saiz semasa tatasusunan.
  3. Apabila memunggah halaman, anda perlu melaksanakan permintaan sendBeacon terakhir. Memandangkan kami tahu bahawa acara beforeunloadunload 事件不可靠,因此我们使用 visibiltychanged 事件(如果浏览器支持),当新的可见性状态为“隐藏”时,我们会更新服务器。该文档讨论了导致触发此事件的用户操作(不仅仅是在关闭页面时)。但是,如果浏览器不支持此事件,则 pagehidebeforeunload dan
  4. unload
tidak boleh dipercayai, kami menggunakan

visibiltychangedNavigator.sendBeacon 方法的文档中没有讨论是否可以有多个并发请求。假设可能存在(这是一个异步调用),则在 sendBeacon acara (jika penyemak imbas menyokongnya), kami mengemas kini pelayan apabila keadaan keterlihatan baharu "tersembunyi". Dokumentasi membincangkan tindakan pengguna yang menyebabkan peristiwa ini dicetuskan (bukan hanya semasa menutup halaman). Walau bagaimanapun, jika penyemak imbas tidak menyokong acara ini, pagehide

🎜. 🎜 🎜 Dokumentasi untuk kaedah 🎜🎜Navigator.sendBeacon🎜 tidak membincangkan sama ada boleh terdapat berbilang permintaan serentak. Dengan mengandaikan ia mungkin (ini ialah panggilan tak segerak), pengguna boleh memutuskan untuk meninggalkan halaman atau menutupnya disebabkan 🎜setInterval semasa permintaan 🎜sendBeacon🎜 sedang dijalankan. pemindahan. Kemudian, URL pelayan yang anda hantar permintaan ini mungkin harus mengunci jadual semasa melakukan sisipan, supaya mana-mana POST berikutnya ke URL itu akan disekat sehingga yang sebelumnya selesai. Jika jadual anda menggunakan beberapa jenis nombor turutan sebagai kunci utama, penyelesaian lain yang saya cadangkan adalah untuk lulus indeks tatasusunan permulaan bagi acara pertama yang dihantar ke pelayan, dan pelayan akan menggunakannya untuk menetapkan urutan secara eksplisit bagi setiap acara Tidak . Kemas kini serentak kemudiannya boleh dijalankan tanpa mengunci seluruh jadual. 🎜
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan