Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить об'єкт history?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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 без перезавантаження сторінки**.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати431 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.