HTML5 ???? API? ???? ??? ?????? ????????. Pushstate, Relfacestate ? PopState? ?? ?? ????? ?? ???? ?????. ?? ??? ??? ????. 1. history.pushstate ()? ??? ??? ??? ??? ??? ?????. 2. history.replacestate ()? ??? ??? ???? ?? URL? ?????? ? ??? ?? ???? ?????. 3. Window.onPopState? ????? ??? ? ? ???? ????. ??? ?? ???? ?? ??? ?? ?? ??? ???? PushState? ???? URL? ?????? ??? ???? ???????? PopState? ????. ??? 404 ??? ??? ?? ?? ?? ??? ??? ???????.

??? ?? ???? ?? ??? ?????? (SPA)?? ?? ????? HTML5? ???? API?? ?? ???? ??? ??? ???? ?? ?????. ?? ?? ???? ?????? ?? ???? ?? ?? ?? URL? ??? ? ??? ????? ?? ??? ?? ????? ??? ? ????.

HTML5 History API? ??????

HTML5? ???? API? ????? ???? ??? ???? ? ?? ?? ??? ?????. ?? ????? ???? ?? ??? ????.

• history.pushState() : ??? ??? ??????.
• history.replaceState() : ?? ??? ??????.
• window.onpopstate : ???? ??/?? ??? ???? ??? ? ???? ????.

? ???? ??? ?? ??? ????? ??? ?? "???"?? ?? ? ? SPA? URL? ?????? ? ??????.

?? ??, ???? /home ?? /about ? pushState ???? ? URL? ??? ???? ???? ?? ???? ??? ?? ? ? ???? ?? ???? ?????? ? ? ????.

Pushstate? Relessate? ???

? ?? ??? ??? ???? ?? ?? ??? ??? ????.

• Pushstate : ???? ??? ??? ??? ?????. ???? ? ???? ???? ?? ???? ??? ??? ??? ????? ?????.
• ??? : ?? ?? ??? ?????. ?? ?? ???? ?? ??? ????? ?????? ?? ?? ??? ??? ??? ?? URL? ?????? ?? ?????.

??? ?? ?? ??? ?????. ? ? (state, title, url) , ???

• state ? URL? ??? ???? ???? ? ??? ??? ?? ?????.
• title ????? ???? ? ???? ?????.
• url ?? ?? ?? ???? ?????.

?? ??:

 history.pushstate ({page : 'about'}, ',', '/about');

?? ? ?? ?? ?? /about ??? ???? ?? ???? ????.

???? ????? ??? ?????? ???

???? ????? ?? ?? ?? ??? ???? popstate ???? ??????. ? ???? ??? ??? ???? ???? ? ? ????.

 Window.addeventListener ( 'PopState', (???) => {
  const state = event.state;
  // ?? ?? ?? URL? ???? ? ??? ???? ???};

pushState ?? replaceState ???? popstate ???? ????? ??? ??? ????? ??? ???? ??? ? ??????.

???? API? ?? ??? ?? ???? ???? ??? ??????

???? ??? ?? ??? ?? (? : React Router ? Vue ???)?? ?? ???? API? ?????? ??? ????? ???? ????. ??? ??? ?? ???? ?? ???? ?? ???? ????? ??? ????.

1. ?? ??? ???? ?? ?? ?? ??? ??????.
2. pushState ???? URL? ????????.
3. ? URL? ?? ?? ?? ?? ?? ??????????.
4. Browser? ???/?? ???? ?? popstate ???? ????.

Simple example:

 document.querySelectorall ( 'a'). foreach (link => {
  link.addeventListener ( 'click', e => {
    e.preventDefault ();
    const path = link.getAttribute ( 'href');
    history.pushstate ({path}, '', path);
    ?? (??);
  });
});

?? ????? (Path) {
  // ??? ?? ???? ??? ?? ?????}

?? ??? ??? ??? ???? ?? HTML ?? (????? index.html )? ?? ? ? ??? ??? ???????. ??? ??? ?? ??? /about 404? ?????.

????? ?? ??. ???? API? ????? ??? ?? ??? ?? ? ? ?? ??????. ??? (IE ??? ?? ??) ? ??? ?? ?? ?????? ???? ????? ? ?????.

? ??? ?? ??? ?? ??????? HTML5 ???? API? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!