Lädt...


🔧 The JavaScript History API


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Introduction

The JavaScript History API is a part of the Web API that allows us to interact with the browser's session history. It provides methods and properties to navigate, manipulate and control the history stack, enabling developers to create more dynamic and interactive user experiences without requiring full page reloads.

Key features of the JavaScript History API

  1. history.back()
  2. history.forward()
  3. history.go(n)
  4. history.pushState()
  5. history.replaceState()

The history.back() method

This method moves the browser to the previous page in the session history, equivalent to the browser's back button. This will only work if a previous page exists in the browser's history stack.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.back() Method</h2>

<button onclick="history.back()">Go Back</button>

</body>
</html>

Output:

First Output

Clicking on the "Go Back" button will take the user to the previous page if it exists in the history stack.

The history.forward() method

This method moves the browser to the next page in the session history, equivalent to the browser's forward button. This will only work if a next page exists in the browser's history stack.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The Window History Object</h1>
<h2>The history.forward Method</h2>

<button onclick="history.forward()">Go Forward</button>

</body>
</html>

Output:

Second Output

Clicking on the "Go Forward" button will take the user to the next page if it exists in the history stack.

The history.go() method

This method is used to navigate to a specific point in the browser stack. It takes an argument 'n', which specifies the number of the page we want to navigate to through the history stack.

The argument 'n' can accept the following values:

  • Positive 'n' takes user forward in the stack.
  • Negative 'n' takes user backward in the stack.
  • If 'n' has value 0, it reloads the current page.

The history.pushState() method

This method is used to add a new entry in the current session's history stack i.e. the collection of all the pages visited in the current browser tab.

Example:
We will create a button element and assign it a click handler. Inside the handler, we call the pushState() method. This adds a new entry with a different URL than the one of the current page.

// HTML ->
<button>Call pushState()</button>

// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
    history.pushState(null, ' ', 'some-page');
}

Output:

Third Output

Currently, the URL is - https://www.codeguage.com/courses/js/examples/pushstate

When you will click on the button, the URL will change to - https://www.codeguage.com/courses/js/examples/some-page

Fourth Output

This confirms that a new entry has been added to the current session's history, also changing the URL in the browser's address bar. You can also see that the browser's back-arrow is also active now in the top-left corner, clicking on which will take you back to -
https://www.codeguage.com/courses/js/examples/pushstate

One extremely important thing to know is that pushState() changes the URL without ever checking whether it even actually exists or not. This is because the purpose of pushState() is not to load a webpage, but rather to just add a new entry to the history.

The history.replaceState() method

This method replaces the current entry in the current session's history stack with a new entry.

Example:
As before, we have a button with a click handler set. But this time, inside the handler, we call replaceState() to replace current history entry with a new one.

// HTML =>
<button>Call replaceState()</button>

// JavaScript =>
var button = document.querySelector('button');

button.onclick = function() {
   history.replaceState(null, '', 'some-page');
}

Output:

Fifth Output

The current URL is -
https://www.codeguage.com/courses/js/examples/replacestate

When you click the button, the URL will change to -
https://www.codeguage.com/courses/js/examples/some-page

Sixth Output

The browser URL has been replaced, and you can notice that the back-arrow key on the top left corner is NOT active, confirming that a new entry has NOT been added to the history stack, we have just replaced the current entry with a new one.

And that's it! You have successfully learnt about the JavaScript History API, and how to use and incorporate its different utilities in your applications.

Connect with me on LinkedIn :- Linkedin

Do check out my GitHub for amazing projects :- Github

View my Personal Portfolio :- Aryan's Portfolio

...

🔧 KISS Principle: Giữ Mọi Thứ Đơn Giản Nhất Có Thể


📈 31.24 Punkte
🔧 Programmierung

🔧 Có thể bạn chưa biết (Phần 1)


📈 31.24 Punkte
🔧 Programmierung

🔧 Tìm Hiểu Về RAG: Công Nghệ Đột Phá Đang "Làm Mưa Làm Gió" Trong Thế Giới Chatbot


📈 31.24 Punkte
🔧 Programmierung

🔧 The History of JavaScript Frameworks: Part 1 - The DynAPI JavaScript Library


📈 18.78 Punkte
🔧 Programmierung

🔧 A Brief History of JavaScript by the Creator of JavaScript


📈 18.78 Punkte
🔧 Programmierung

🔧 Introduction to Native JavaScript APIs: MutationObserver, IntersectionObserver, and History API


📈 18.33 Punkte
🔧 Programmierung

🔧 The JavaScript History API


📈 18.33 Punkte
🔧 Programmierung

🎥 The history API is dead. Long live the navigation API | HTTP 203


📈 17.88 Punkte
🎥 Video | Youtube

🕵️ Xymon up to 4.3.28 History Viewer history.c hostname/service Stack-based memory corruption


📈 16.2 Punkte
🕵️ Sicherheitslücken

📰 Anno History Collection - Überblick über die Anno 1404 History Edition und die Verbesserungen


📈 16.2 Punkte
📰 IT Nachrichten

📰 Anno History Collection - Überblick über die Anno 1503 History Edition und die Verbesserungen


📈 16.2 Punkte
📰 IT Nachrichten

🐧 Any clipboard history app/tool like windows clipboard history?


📈 16.2 Punkte
🐧 Linux Tipps

🪟 Google might add History Embeddings in Chrome to help you search you browsing history quicker


📈 16.2 Punkte
🪟 Windows Tipps

📰 bypass-firewalls-by-DNS-history - Firewall Bypass Script Based On DNS History Records


📈 16.2 Punkte
📰 IT Security Nachrichten

📰 Retail Giant Selling Wrong Black History Book Exposed by US History Teacher


📈 16.2 Punkte
📰 IT Security Nachrichten

🔧 Open Source History, a Computing History


📈 16.2 Punkte
🔧 Programmierung

📰 How to Delete Your YouTube Watch History (and Search History)


📈 16.2 Punkte
📰 IT Security Nachrichten

📰 Is Computer History Also a History of Physical Pains?


📈 16.2 Punkte
📰 IT Security Nachrichten

🪟 Windows 10 Clipboard History Not Working: How to Open My Clipboard History?


📈 16.2 Punkte
🪟 Windows Tipps

📰 Windows 10 Clipboard History Not Working: How to Open My Clipboard History?


📈 16.2 Punkte
🖥️ Betriebssysteme

📰 History’s Greatest Mysteries: So seht ihr die History-Sendung im TV und Stream - alle Sendetermine


📈 16.2 Punkte
📰 IT Nachrichten

🕵️ Opera Web Browser 11.61 history.pushState/history.replaceState information disclosure


📈 16.2 Punkte
🕵️ Sicherheitslücken

🕵️ NeDi 1.9C Monitoring History /Monitoring-History.php det sql injection


📈 16.2 Punkte
🕵️ Sicherheitslücken

🐧 The Hidden Early History of Unix The Forgotten history of early Unix (Warner Losh at FOSDEM 2020)


📈 16.2 Punkte
🐧 Linux Tipps

🔧 How to Fetch Data from an API using the Fetch API in JavaScript


📈 15.12 Punkte
🔧 Programmierung

🔧 How to Fetch Data from an API Using the Fetch API in JavaScript


📈 15.12 Punkte
🔧 Programmierung

matomo