Estoy creando una aplicación web para guardar datos en la base de datos MySQL. ahora necesito guardar datos cuando se cierra el navegador. Usé la función ajax para llamar a mis servicios web PHP. Usé el evento onunload para detectar el evento de cierre del navegador. Mi problema es cuando el navegador lo cierra, activa el evento onunload pero no espera hasta que la función ajax tenga éxito. Debido a que los datos no se guardan en la base de datos. Cuando pongo el punto de depuración en la función de descarga, funciona bien y guarda todos los datos en la base de datos.
Esto es lo que probé.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>Testing data save on close event</h1> </body> </html> <script> window.onunload = function(e) { console.log("The Window is closing!"); saveDataOnClose(); }; function saveDataOnClose(){ url = URL+"savedata.php"; var client = [{firstName: 'John', lastName: 'doe', EmailAddress: 'jhon@gmail.com'}]; var jObj = JSON.stringify(client); $.ajax({ url: url, type: "POST", data: { "Client": jObj, }, success: function (result) { var Id = result; localStorage.setItem("result", Id); }, error: function (xhr, errorType, exception) { console.log("Store data on remote database", "Storing data on the remote database failed, " + xhr.statusText + " " + xhr.status + new Error().stack, false); } }); } </script>La función window.onunload es una función especial, por lo que en realidad se puede ejecutar el código asíncrono, pero el navegador lo eliminará cuando la pestaña se haya cerrado, lo que sucede de inmediato.
Una pregunta similar ha sido respondida aquí . La solución podría estar en los trabajadores de servicio, que manejan los datos en segundo plano, incluso si su sitio web no está abierto.
Pero, lo que también podría hacer es almacenar los datos en el objeto localStorage temporalmente, que maneja los datos de forma síncrona.
Tan pronto como su usuario regrese a su sitio web en el mismo dispositivo, puede verificar si hay cambios no guardados y sincronizarlos con su backend.
En su caso, considere usar el evento onbeforeunload . Lo que hace este evento es que le muestra un cuadro de confirmación al usuario cuando está a punto de cerrar la pestaña o recargar la página o intenta alejarse de la página actual.
<html> <body onbeforeunload="return myFunction()"> <a href="https://www.google.com/">Click here to go to Google.com</a> <script> function myFunction() { return "Return anything here....."; } </script> </body> </html>