Suggest an edit

Improve this article

Refine the answer for “What does the history object do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What `history` is

`history` is a property of the `window` object:

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

It holds the **history of visited pages** within the **current tab**.

## 2. Main `history` methods:

| Method | What it does | Example |
| --- | --- | --- |
| `back()` | navigate to the **previous page** (like the "Back" button) | `history.back()` |
| `forward()` | navigate to the **next page** (like "Forward") | `history.forward()` |
| `go(n)` | navigate `n` steps forward/back | `history.go(-1)` - go back one page |
| `pushState(state, title, url)` | add a new entry to the history without reloading | `history.pushState({}, '', '/about')` |
| `replaceState(state, title, url)` | replace the current entry in the history | `history.replaceState({}, '', '/home')` |

## 3. `history` properties:

| Property | Description |
| --- | --- |
| `history.length` | number of entries in the current tab's history stack |

Example:

```javascript
console.log(history.length); // e.g. 5
```

## 4. Usage examples

### Going "back" and "forward":

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

Works like the browser's back and forward buttons.

### Moving several steps:

```javascript
history.go(-2); // back 2 pages
history.go(1);  // forward 1 page
```

### Adding an entry to the history (SPA apps)

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

The `pushState()` method **changes the URL without reloading the page** -
this is how **single-page applications (SPA)** work,
for example, React Router, Vue Router, and so on.

### Changing the current entry:

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

`replaceState()` does not create a new entry,
it **overwrites** the current one (useful for redirects).

### Reacting to history changes:

```javascript
window.addEventListener("popstate", event => {
  console.log("Navigated through history:", event.state);
});
```

The `popstate` event fires
when the user clicks "Back" or "Forward" in the browser.

## 5. Difference between the "browser history" and `history`

- `history` manages **only the current tab's history**.
- It does not give access to pages opened earlier in other tabs.
- It does not show a "list of sites" (for security reasons).

## 6. Typical uses of `history`:

- managing routing in SPAs (React Router, Vue Router)
- changing the URL without reloading
- implementing "Back" / "Forward" buttons
- preserving page state (for example, a selected filter)

## Briefly:

| What it does | Manages the tab's navigation history |
| --- | --- |
| Where it lives | `window.history` |
| Main methods | `back()`, `forward()`, `go()`, `pushState()`, `replaceState()` |
| You can check | the number of entries (`history.length`) |
| Fires an event | `popstate` |
| Used in | SPAs, dynamic transitions, routing |

> **Summary:**
> `history` is an API for **managing navigation history**,
> which lets you move forward/back
> and **change the URL without reloading the page**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts481 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.