Що робить об'єкт history?

JavaScriptJunior~2 хв читання

1. Що таке `history`

history - це властивість об'єкта window:

javascript

console.log(window.history === history); // true

Вона містить історію відвіданих сторінок у межах поточної вкладки.

2. Основні методи `history`:

Метод	Що робить	Приклад
`back()`	перехід на попередню сторінку (аналог кнопки "Назад")	`history.back()`
`forward()`	перехід на наступну сторінку (аналог "Вперед")	`history.forward()`
`go(n)`	перехід на `n` кроків вперед/назад	`history.go(-1)` - назад на одну сторінку
`pushState(state, title, url)`	додати новий запис в історію без перезавантаження	`history.pushState({}, '', '/about')`
`replaceState(state, title, url)`	замінити поточний запис в історії	`history.replaceState({}, '', '/home')`

3. Властивості `history`:

Властивість	Опис
`history.length`	кількість записів у стеку історії поточної вкладки

Приклад:

javascript

console.log(history.length); // наприклад, 5

4. Приклади використання

Перехід "назад" і "вперед":

javascript

document.querySelector("#back").onclick = () => history.back();
document.querySelector("#next").onclick = () => history.forward();

Працює як кнопки браузера "назад" і "вперед".

Перейти на кілька кроків:

javascript

history.go(-2); // назад на 2 сторінки
history.go(1);  // вперед на 1 сторінку

Додати запис в історію (SPA-застосунки)

javascript

history.pushState({ page: "about" }, "About", "/about");
console.log(location.pathname); // "/about"

Метод pushState() змінює URL без перезавантаження сторінки - саме так працюють односторінкові застосунки (SPA), наприклад, React Router, Vue Router тощо.

Змінити поточний запис:

javascript

history.replaceState({ page: "home" }, "Home", "/home");

replaceState() не створює новий запис, а перезаписує поточний (корисно при редиректі).

Реакція на зміну історії:

javascript

window.addEventListener("popstate", event => {
  console.log("Перехід по історії:", event.state);
});

Подія popstate спрацьовує, коли користувач натискає "Назад" або "Вперед" у браузері.

5. Різниця між "історією браузера" і `history`

history керує лише історією поточної вкладки.
Він не дає доступу до сторінок, відкритих раніше в інших вкладках.
Він не показує "список сайтів" (заради безпеки).

6. Типове застосування `history`:

керування маршрутизацією в SPA (React Router, Vue Router)
зміна URL без перезавантаження
реалізація кнопок "Назад" / "Вперед"
збереження стану сторінки (наприклад, обраного фільтра)

Коротко:

Що робить	Керує історією навігації вкладки
Де знаходиться	`window.history`
Головні методи	`back()`, `forward()`, `go()`, `pushState()`, `replaceState()`
Можна дізнатися	кількість записів (`history.length`)
Генерує подію	`popstate`
Використовується в	SPA, динамічних переходах, маршрутизації

Підсумок: history - це API для керування історією переходів, яке дозволяє переміщатися вперед/назад і змінювати URL без перезавантаження сторінки.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.