[JS] Za pomocą JavaScript zapytaj użytkownika o zdanie zanim opuści on okno przeglądarki

Dzisiejszy wpis będzie krótki, bo będzie dotyczył w sumie nieskomplikowanej funkcjonalności związanej z obsługą zamykania okna/zakładki przeglądarki. Bardzo często tego typu zdarzenia JavaScript można spotkać w aplikacjach internetowych.

Section 1Przykładowy kod HTML symulujący interfejs aplikacji

1
2
3
4
5

<form action="/" method="POST">
  <input type="text">
  <input type="text">
  <button type="submit">Zapisz</button>
</form>

W tym przykładzie, interfejsem aplikacji będzie formularz z dwoma polami tekstowymi. W momencie zakmnięcia okna/zakładki lub odświeżenia ich zawartości będzie pojawiał się komunikat z treścią przygotowaną przez programistę oraz dwoma typami przycisków.

Section 2Interakcja z użytkownikiem za pomocą JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// po załadowaniu strony
window.onload = function () {
  // sprawdzamy czy istnieje interfejs obsługi localStorage w przeglądarce
  // czyli rodzaj bazy danych udostępnianej przez przeglądarki
  if (localStorage) {
    var inputs = document.getElementsByTagName('input');
 
    // jesli istnieje, to wypełnij pola formularza zapisanymi wartościami
    // jesli wartości nie istnieją, to pola będą puste
    inputs[0].value = localStorage['input-jeden'];
    inputs[1].value = localStorage['input-dwa'];
  }
};
// przed wyjściem ze strony lub jej odświeżeniem
window.onbeforeunload = function () {
  // sprawdzenie czy istnieje interfejs localStorage
  if (localStorage) {
    // jeśli użytkownik potwierdzi że chce zapisać stan aplikacji
    if (confirm("Czy chcesz zapisać obecny stan formularza na później?")) {
      var inputs = document.getElementsByTagName('input');
 
      // zapisz wartości pól z formularza w localStorage
      localStorage['input-jeden'] = inputs[0].value;
      localStorage['input-dwa']   = inputs[1].value;
    }
  }
};

Powyższy kod ma na celu wykonać 2 zadania:

1. po załadowaniu strony:
   • sprawdzić czy funkcjonalność localStorage jest dostępna w przeglądarce,
   • wypełnić pola tekstowe zapisanymi wartościami pochodzącymi z localStorage.
2. przed opuszczeniem strony:
   • sprawdzić czy funkcjonalność localstorage jest dostępna w przeglądarce,
   • sprawdzić czy użytkownik potwierdził chęć zapisania danych z formularza na później,
   • zapisać dane w przeglądarkowej bazie danych.

Section 3Podsumowanie

Na podstawie powyższego kodu widać wyraźnie jak prosto można za pomocą czytego JavaScript osiągnąć odpowiednią interakcję z użytkownikiem aplikacji, który chce akurat ją opuścić. Dzięki temu, można dać mu szansę na zastanowienie się, czy chciałby aby dane z formularza, który akurat wypełniał, zostały zapisane.

Tego typu komunikaty można spotkać w wielu miejscach, między innymi na Facebooku lub w usługach edycji kodu typu JSFiddle.
Jak zwykle, w takich przypadkach należy się zastanowić czy warto się pytać użytkownika o zdanie czy może lepiej prewencyjnie zapisać dane bez pytania i potem ewentualnie podczas ładowania ponownie formularza zapytać o zdanie.

Należy też pamiętać o tym, że użytkownicy mają tendencję do nieczytania komunikatów, które mają domyślny wygląd. Niestety, na chwilę obecną nie jesteśmy w stanie w jakikolwiek sposób zmodyfikować wygląd powiadomienia z okna przeglądarki. Można jednak przygotować własne okna komunikatów, które będą zastępowały domyślny. Jednak wymaga to trochę więcej zachodu.