electron/docs/tutorial/navigation-history.md

title	description	slug	hide_title
Navigation History	The NavigationHistory API allows you to manage and interact with the browsing history of your Electron application.	navigation-history	false

Navigation History

Overview

The NavigationHistory class allows you to manage and interact with the browsing history of your Electron application. This powerful feature enables you to create intuitive navigation experiences for your users.

Accessing NavigationHistory

Navigation history is stored per WebContents instance. To access a specific instance of the NavigationHistory class, use the WebContents class's contents.navigationHistory instance property.

const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow()
const { navigationHistory } = mainWindow.webContents

Navigating through history

Easily implement back and forward navigation:

// Go back
if (navigationHistory.canGoBack()) {
  navigationHistory.goBack()
}

// Go forward
if (navigationHistory.canGoForward()) {
  navigationHistory.goForward()
}

Accessing history entries

Retrieve and display the user's browsing history:

const entries = navigationHistory.getAllEntries()

entries.forEach((entry) => {
  console.log(`${entry.title}: ${entry.url}`)
})

Each navigation entry corresponds to a specific page. The indexing system follows a sequential order:

• Index 0: Represents the earliest visited page.
• Index N: Represents the most recent page visited.

Navigating to specific entries

Allow users to jump to any point in their browsing history:

// Navigate to the 5th entry in the history, if the index is valid
navigationHistory.goToIndex(4)

// Navigate to the 2nd entry forward from the current position
if (navigationHistory.canGoToOffset(2)) {
  navigationHistory.goToOffset(2)
}

Here's a full example that you can open with Electron Fiddle: