window.history

Curs Javascript

Navigatoarele web au o caracteristica numita "History" care permite urmarirea locatiilor pe care le-ati vizitat.
Acest obiect apartine direct obiectului "window"; contine un Array cu paginile vizitate de client, in cadrul unei ferestre, un istoric al paginilor vizitate.

- Obiectul history permite navigarea inapoi in lista istoric la paginile care au mai fost vizitate in cadrul aceleasi ferestre.
Acest obiect are cateva proprietati si metode care pot fi apelate cu sintaxa:

• Obiectul history are doua proprietati: length si state.
window.history.length - returneaza numarul de adrese URL din 'history'.
window.history.state - returneaza obiectul adaugat in history cu pushState() sau replaceState().

Metode obiect history

• back() - incarca in pagina adresa URL precedenta din lista istoric.
  <button onClick='window.history.back()'>Back</button>
• forward() - incarca urmatoarea adresa URL din lista istoric.
  <button onClick='window.history.forward()'>Forward</button>
• go(x) - incarca o adresa URL, echivalenta cu un salt la numarul "x" (pozitiv sau negativ) din lista istoric.

  window.history.go(-1); //echivalent cu: window.history.back()
  window.history.go(-2); //a doua adresa inapoi
  window.history.go(1); //echivalent cu: window.history.forward()
  

• pushState(state_obj, title, url) - adauga in istoric o noua intrare pt. pagina curenta, cu adresa de la 'url' si titlul de la 'title'.
  In plus, modifica adresa din bara de adrese cu 'url', fara sa incarce acea adresa (nu conteaza daca e adresa valida sau nu).
  - 'state_obj' e un mic obiect JS asociat cu noua modificare in istoric, care apoi poate fi preluat cu: history.state.

  <button onClick='addAdr()'>Adauga adresa</button>
  <script>
  var stob ={prop:'some str'};
  function addAdr(){
   window.history.pushState(stob, 'New Title', 'some_url.html');
  
   //foloseste cu proprietatea state obiectul adaugat in history
   alert(history.state.prop);
  }
  </script>
  

  - Demo:
  - Clic pe urmatorul buton, vedeti modificarea la adresa din browser.
  Adauga adresa
• replaceState(state_obj, title, url) - modifica in 'history' istoricul pagini curente cu argumentele transmise: adresa de la 'url' si titlul cu 'title'.
  La fel ca pushState(), modifica adresa din bara de adrese cu 'url', fara sa incarce acea adresa (nu conteaza daca e adresa valida sau nu).
  - 'state_obj' e un mic obiect JS asociat cu noua modificare in istoric, care apoi poate fi preluat cu: history.state.

  <button onClick='replaceAdr()'>Modifica adresa</button>
  <script>
  var stob ={prop:'some str'};
  function replaceAdr(){
   window.history.replaceState(stob, 'New Title', 'change_url.html');
  
   //foloseste cu proprietatea state obiectul adaugat in history
   alert(history.state.prop);
  }
  </script>
  

  - Demo:
  - Clic pe urmatorul buton, vedeti modificarea la adresa din browser.
  Modifica adresa