JS historik

JavaScript:s history-objekt hanterar webbläsarens navigeringshistorik. Det ger tillgång till information om tidigare besökta sidor och metoder för att navigera framåt och bakåt genom historiken.

Nyckelbegrepp:

• History-objekt: Ger tillgång till navigeringshistoriken.
• Webbläsarhistorik: En lista över tidigare besökta webbsidor.
• Bakåt: Navigerar till den tidigare besökta sidan.
• Framåt: Navigerar till den nästa besökta sidan.
• Navigeringshistorik: Historiken över navigeringar inom ett fönster eller en flik.

Praktiska steg:

1. Få åtkomst till history-objektet:

const history = window.history;

2. Hämta information om den aktuella sidan:

console.log(history.length); // Antal besökta sidor
console.log(history.state); // Data associerat med den aktuella sidan
console.log(history.location); // Den aktuella webbadressen

3. Navigera bakåt eller framåt:

history.back(); // Navigerar en sida bakåt
history.forward(); // Navigerar en sida framåt

4. Uppdatera navigeringshistoriken:

history.pushState({ someData: 'data' }, 'Title', '/new-page'); // Lägger till en ny post i historiken
history.replaceState({ someData: 'data' }, 'Title', '/new-page'); // Ersätter den aktuella posten i historiken

Exempel:

const history = window.history;

// Lyssna på "popstate"-händelsen när historiken ändras
window.addEventListener('popstate', function(e) {
  console.log('Historiobjektet ändrades:', e.state);
});

// Navigera framåt
history.pushState({ page: 'två' }, 'Sida Två', '/sida-tva');

// Navigera bakåt
history.back();