So speichern Sie den Seitenstatus beim Schließen

Question

Wie wird die Synchronisierung der Daten einer Webanwendung mit einem Server akzeptiert, wenn ein Benutzer das Browserfenster schließt, ohne zuvor seine Arbeit zu speichern? Ich rede entweder mit dem "X" oder sogar mit F5 oder so.

Ein wenig Hintergrund:

Die Webapp in Frage hat ein Hauptfenster, und dann Kind Fenster, die aus dem Hauptfenster erzeugen, so dass Sandbox „Arbeit“ in den untergeordneten Fenstern erfolgen. Ich habe keine Kontrolle über diesen Aspekt der Implementierung.

Der Anwendungsfall:

Jedes Kind-Fenster kann eine ziemlich beträchtliche Menge an Informationen haben, bevor der Benutzer eingegeben entscheidet „OK“ bestehen bleiben die Daten auf dem Server zu klicken.

Dinge, die ich in Betracht gezogen habe/versucht:

• Einfache Nähe Bestätigung durch eine Zeichenfolge von einem onbeforeunload Ereignisbehandlungsroutine zurückkehrt, wenn es nicht gespeicherte Arbeit. (Problem: Mein Teamleiter ist nicht bereit, einen Browser-spezifischen "alert Dialog" in der Webapp zu lassen. Laut ihm: User Experience geht das Fenster verlassen sich auf diesen hässlich aussehenden Dialog.)
• AJAX Anforderung, die während des Ereignisses onpageunload ausgelöst wurde, das die Daten an den Server zurücksendet. (Problem: Da der XHR Rückruf nie genannt wird, finde ich einige Browser die Verbindung offen zu lassen, und dann versuchen, zufällig den Rückruf eines zukünftigen Fenster zu schießen, die geöffnet wird.)
• Synchrone AJAX Anfrage während der gebrannte onpageunload Ereignis. (Problem: Ignorieren der Tatsache, dass Menschen, die mich selbst enthalten, dazu tendieren dies zu hassen und die Tatsache, dass es veraltet ist und in Zukunft entfernt wird ... Die Benutzeroberfläche könnte möglicherweise für eine lange Zeit auf die AJAX-Anfrage warten vollständig, vielleicht unbegrenzt, wenn sie das Internet verlieren.)
• Speichern Sie den Inhalt der Seite in regelmäßigen Abständen, oder indem Sie onchange/onblur/onwhateverelse Event-Handler. :
• localStorage Verwendung auf der Client-Gerät die geändertenen Felder zu halten, bis sie tatsächlich ihre Arbeit an den Server commit (Problem riesige Mengen an Codierungsaufwand im Vergleich zu den „faulen“ Implementierungen oben und unten.). (Problem: Browser-Unterstützung ... dies muss so viele Orte wie Unterstützung XHR unterstützen. Hat Client-Side-Speicher diese breite Unterstützung? Ich denke, es gibt eine kleine Lücke, wenn ich mich nicht irre.)

Vielen Dank im Voraus für Ihre Eingabe.

Answer 1

Die Lösung, die ich gefunden habe, ist im Wesentlichen eine modifizierte Version der Wahl 4 von oben.

Ich entwickelte eine Logik, die onchange/onkeypress Event-Handler mit Knoten registriert, die durch ein bestimmtes Attribut (in diesem Fall data-save-state="true") identifiziert werden, wenn die Seite geladen wird.

Um dies zu verwenden, ist die einzige Voraussetzung für die Entwickler von jedem der "untergeordneten Fenster", die aus dem Hauptfenster gestartet werden, die URI zu registrieren, die ihre Daten mit meinem neuen Javascript Saver Modul gespeichert werden sollen.

Die Werte des identifizierten Elements werden serialisiert und als JSON-Objekt an die Saver gesendet. Die Saver ist verantwortlich für das Einreihen von Sätzen von Anfragen und deren Senden an den Server als eine Gruppe, wenn für 1000 ms keine weiteren Änderungen festgestellt wurden.

Das war mehr Overhead für mich, die die Fähigkeit dazu entwickeln musste, aber jetzt, wo es da ist, ist es ziemlich einfach für andere Teammitglieder, in ihren Code zu integrieren.

Was das Potential für verlorene Daten betrifft, besteht das einzige Risiko jetzt in dieser Sekunde, bevor die Speicheranforderung an den Server gesendet wird. Diese Lösung scheint mir sehr "Google Docs" -ähnlich zu sein.

Answer 2

Klingt für mich wie Sie Cookies verwenden möchten. Soweit ich weiß, wird es auf praktisch jedem Webbrowser unterstützt.

Das einzige, was localStorage nicht unterstützt wird, ist Opera Mini .. Ich denke, das ist ein bisschen zu viel Nicht-Unterstützung für Sie oder die Person, die Sie das Programm für machen.

Here's a plugin for handling cookies, weil sie wirklich nicht etwas sind, das Sie ohne Plugins behandeln möchten. ;) Sieht so aus, als ob es in jedem Browser unterstützt wird!

Falls Sie keine Bibliothek verwenden möchten, finden Sie hier die Mozilla Developer Network-Seite unter Document.cookie.

Wenn Sie mehr über den Verlauf von Cookies erfahren möchten, können Sie unter this nachsehen.