Estoy tratando de diferenciar entre los eventos de actualización de página, cierre del navegador y nueva pestaña.
Entonces, quiero un poco de manejo en la página cerrar V/s actualización de página/nueva pestaña
Encontré la siguiente solución usando sessionStorage. Sin embargo, el problema con sessionStorage es que se restablece o no se lee incluso al abrir el enlace en una nueva pestaña. Pero quiero que tanto la actualización de la página como la nueva pestaña se comporten de la misma manera que la actualización de la página.
if (sessionStorage.getItem('reloaded') != null) { console.log('page was reloaded'); } else { console.log('page was not reloaded'); } sessionStorage.setItem('reloaded', 'yes');Tendrá que usar una combinación de sessionStorage y localStorage para conservar los datos y confiar en el evento beforeunload para manejar la eliminación de datos.
La cuestión es que beforeunload se activa tanto en el cierre de la pestaña/ventana como en la actualización de la página , por lo que tenemos que solucionarlo.
localStorage manejará la persistencia entre pestañas y ventanas y sessionStorage sincronizará los datos en la actualización de la página.
const readFromStorage = (storageKey) => { const localStorageItem = localStorage.getItem(storageKey); const sessionStorageItem = sessionStorage.getItem(storageKey); // You can optimize this by doing more checks but you get the idea const itemValue = localStorageItem ?? sessionStorageItem; if (localStorageItem !== sessionStorageItem) { writeToStorage(storageKey, itemValue); } return itemValue; }; const writeToStorage = (storageKey, value) => { localStorage.setItem(storageKey, value); sessionStorage.setItem(storageKey, value); };Controlador de eventos:
window.addEventListener('beforeunload', (e) => { localStorage.removeItem(STORAGE_KEY); });Uso:
const STORAGE_KEY = '<storage_key>'; const item = readFromStorage(STORAGE_KEY); Si item es null , se cerró una pestaña/ventana. De lo contrario, los datos persistirán entre actualizaciones y nuevas pestañas/ventanas.