Πώς μπορεί κανείς να διαχειριστεί την ιστορία του προγράμματος περιήγησης σε JavaScript, μετακινούμενος μπροστά και πίσω;

Το αντικείμενο history παρέχει πρόσβαση στην ιστορία των συνεδριών του προγράμματος περιήγησης. Οι βασικές μέθοδοι για διαχείριση είναι:

• history.back(): επιστρέφει μια σελίδα πίσω στην ιστορία.
• history.forward(): προχωράει μια σελίδα μπροστά στην ιστορία.
• history.go(delta): μετακινείται στον αριθμό βημάτων που ορίζεται στην ιστορία (delta μπορεί να είναι αρνητικό για επιστροφή).

Παράδειγμα χρήσης:

// Επιστροφή στην προηγούμενη σελίδα
history.back();

// Μετάβαση στην επόμενη σελίδα
history.forward();

// Πίσω δύο σελίδες
history.go(-2);

// Μπροστά τρεις σελίδες
history.go(3);

Επιπλέον, το αντικείμενο history επιτρέπει τη διαχείριση της κατάστασης της ιστορίας χωρίς επαναφόρτωση της σελίδας, χρησιμοποιώντας τις μεθόδους pushState και replaceState.

• history.pushState(state, title, url): προσθέτει μια νέα κατάσταση στην ιστορία της συνεδρίας.
  • state: το αντικείμενο κατάστασης που συνδέεται με την καταχώρηση της ιστορίας.
  • title: ο τίτλος της σελίδας (οι περισσότεροι περιηγητές τον αγνοούν).
  • url: το URL που συνδέεται με την καταχώρηση της ιστορίας.
• history.replaceState(state, title, url): αντικαθιστά την τρέχουσα κατάσταση στην ιστορία της συνεδρίας.

Παράδειγμα με pushState:

// Προσθήκη νέας κατάστασης στην ιστορία
history.pushState({ page: 1 }, "Σελίδα 1", "/page1");

// Ενέργειες στη σελίδα χωρίς πλήρη επαναφόρτωση

// Όταν ο χρήστης πατήσει το κουμπί "πίσω", ενεργοποιείται το γεγονός popstate
window.addEventListener('popstate', function(event) {
  console.log('Η κατάσταση άλλαξε:', event.state); // { page: 1 }
  // Ενημέρωση του περιεχομένου της σελίδας σύμφωνα με την κατάσταση
});

Παράδειγμα με replaceState:

// Αντικατάσταση της τρέχουσας κατάστασης στην ιστορία
history.replaceState({ tab: 'active' }, "Ενεργή καρτέλα", "/active-tab");

Το γεγονός popstate ενεργοποιείται όταν ενεργοποιείται μια καταχώρηση στην ιστορία της συνεδρίας.