Objekti brskalnika: History

Objekt history razreda window predstavlja zgodovino seje v trenutnem zavihku ali okviru. Z njim lahko uporabnika premaknemo na prejšnjo ali naslednjo stran v zgodovini seje oziroma na poljubni odmik v tej zgodovini. Zaradi zasebnosti JavaScript ne more prebrati seznamov naslovov, ki jih je uporabnik obiskal, lahko pa po zgodovini seje krmari in v sodobnih primerih upravlja tudi stanje z metodama pushState() in replaceState().

Osnovna pravila

• Objekt history je lastnost objekta window.
• Metoda back() se obnaša podobno kot gumb Nazaj v brskalniku.
• Metoda forward() se obnaša podobno kot gumb Naprej v brskalniku.
• Metoda go(odmik) premakne trenutno stran glede na odmik v zgodovini seje.
• Lastnost history.length vrne število vnosov v zgodovini seje, vključno s trenutno stranjo.

Primerjave

Osnovne metode objekta history

Metoda back()

Metoda back() premakne brskalnik na prejšnji vnos v zgodovini seje. Enak učinek ima tudi history.go(-1).

<script>
function nazaj() {
   history.back();
}
</script>

<input type="button" value="Nazaj" onclick="nazaj()">

Metoda forward()

Metoda forward() premakne brskalnik na naslednji vnos v zgodovini seje. Enak učinek ima tudi history.go(1).

<script>
function naprej() {
   history.forward();
}
</script>

<input type="button" value="Naprej" onclick="naprej()">

Metoda go()

Metoda go() premakne brskalnik za izbrani odmik v zgodovini seje. Negativna vrednost pomeni pomik nazaj, pozitivna naprej. Klic brez argumenta ali z vrednostjo 0 ponovno naloži trenutno stran.

<script>
function triNazaj() {
   history.go(-3);
}
</script>

<input type="button" value="Vrni se 3 strani nazaj" onclick="triNazaj()">

Lastnosti objekta history

Najpomembnejši lastnosti pri osnovni razlagi sta length in state.

Lastnost length

Lastnost history.length vrne število vnosov v zgodovini seje trenutnega zavihka.

<p id="primer"></p>
<script>
document.getElementById("primer").textContent =
   "Število vnosov v zgodovini seje: " + history.length;
</script>

Zgodovina stanja

Sodobna History API poleg premikanja po zgodovini omogoča tudi dodajanje ali zamenjavo stanja trenutne strani z metodama pushState() in replaceState(). To je uporabno predvsem v enostranskih spletnih aplikacijah, kjer želimo spreminjati naslov ali stanje brez polnega ponovnega nalaganja strani.

history.pushState({ korak: 1 }, "", "?korak=1");
history.replaceState({ korak: 2 }, "", "?korak=2");

Priporočila

• Za osnovno premikanje po zgodovini seje uporabljaj metode back(), forward() in go().
• Upoštevaj omejitve zasebnosti, zato z JavaScriptom ne poskušaj brati seznama obiskanih naslovov.
• Za preproste primere preverjaj lastnost history.length, za zahtevnejše primere pa uporabljaj history.state, pushState() in replaceState().
• Za izpis navadnega besedila v dokument uporabljaj textContent.
• Dogodek popstate uporabljaj pri obravnavi premikanja po zgodovini seje.

Pogoste napake

• Metodi back() in forward() se zapisujeta z napačnim imenom objekta, na primer hitory namesto history.
• Lastnost history.length se razume kot število naslovov, ki jih lahko JavaScript prebere, čeprav gre le za število vnosov v zgodovini seje.
• Predpostavi se, da bo history.go(-3) vedno uspešno izveden, čeprav se nič ne zgodi, kadar takega odmika ni v zgodovini.
• Metodi pushState() in replaceState() se razlagata kot neposredni navigaciji na novo stran, čeprav praviloma le spremenita stanje in po potrebi naslov znotraj istega izvora.
• Dogodek popstate se pričakuje takoj po klicu pushState() ali replaceState(), čeprav se ob teh klicih sam po sebi ne sproži.