JavaScript membezakan antara penutup tab penyemak imbas dan penutup pelayar penuh

Dalam penggunaan harian Pelayaran Multi-Tab, pengguna mungkin perlu menutup tab tunggal atau penyemak imbas keseluruhan. Dalam sesetengah senario aplikasi, sebagai contoh, tindakan tertentu diperlukan apabila penyemak imbas ditutup sepenuhnya (seperti maklumat log masuk penjelasan), tetapi tidak apabila menutup tab tunggal. Artikel ini akan meneroka cara menggunakan JavaScript untuk membezakan antara kedua -dua situasi ini dan menyediakan penyelesaian yang sepadan.

Penerangan Masalah

Katakan aplikasi web yang kami buat berjalan pada penyemak imbas Chrome pada sistem Windows. Keperluannya adalah untuk membersihkan maklumat log masuk apabila pengguna menutup seluruh penyemak imbas, sambil mengekalkan maklumat log masuk tidak berubah apabila menutup tab tunggal. Bagaimana untuk melaksanakan fungsi ini?

Penyelesaian

Kita boleh menggunakan objek sessionStorage HTML5 untuk menyelesaikan masalah ini. sessionStorage membolehkan data pasangan nilai kunci disimpan dalam sesi yang sama. Apabila menutup penyemak imbas, data di sessionStorage akan dibersihkan, sementara menutup tab tunggal tidak akan menjejaskan data sessionStorage tab lain.

Langkah -langkah pelaksanaan khusus adalah seperti berikut:

1. Dengarkan Acara Tutup Pelayar: Gunakan Acara beforeunload untuk mendengar Operasi Tutup Tutup Pelayar.

    window.AddEventListener ('sebelum ini', fungsi (e) {
        // Tambah kod untuk membersihkan maklumat log masuk di sini, tetapi harus diperhatikan bahawa secara langsung melaksanakan di sini juga boleh menyebabkan penjelasan ketika menutup tab.
    });

2. Gunakan SesiStorage untuk membezakan tingkah laku penutup: Apabila setiap tab dimuatkan, tetapkan item sessionStorage dan periksa sama ada item itu wujud apabila ditutup. Jika ia wujud, ini bermakna halaman tab ditutup; Jika ia tidak wujud, ini bermakna bahawa seluruh penyemak imbas ditutup.

    // Tetapkan sessionStorage apabila halaman dimuat
    window.addeventListener ('beban', fungsi () {
        sessionStorage.setItem ('tabOpen', 'true');
    });
   
    // semak sessionStorage semasa ditutup
    window.AddEventListener ('sebelum ini', fungsi (e) {
        jika (! sessionStorage.getItem ('tabOpen')) {
            // Maklumat log masuk jelas clearLoginInfo ();
        } else {
            // Buang sessionStorage item sessionStorage.removeItem ('tabOpen');
        }
    });
   
    fungsi ClearLoginInfo () {
        // Tambah kod untuk membersihkan maklumat log masuk di sini ke Console.log ('Maklumat Log Masuk ...');
    }

Melalui kaedah di atas, kami dapat membezakan dengan berkesan antara menutup halaman tab dan menutup penyemak imbas, dan melaksanakan operasi membersihkan maklumat log masuk apabila penyemak imbas ditutup sepenuhnya, sementara operasi ini tidak akan dilakukan apabila menutup halaman tab tunggal. Harus diingat bahawa peristiwa beforeunload boleh dipintas atau ditangguhkan oleh penyemak imbas, bergantung kepada pelaksanaan spesifik penyemak imbas dan tetapan pengguna. Untuk meningkatkan kebolehpercayaan, teknologi lain, seperti pengurusan sesi pelayan, boleh dipertimbangkan.

Atas ialah kandungan terperinci Bagaimana untuk membezakan antara menutup tab penyemak imbas dan menutup seluruh penyemak imbas menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!