Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Access Browsing History in JavaScript
In this article, we will learn to access browsing history using Javascript. In web development, accessing a user's browsing history can improve user experience and provide personalized content. However, due to privacy concerns and security reasons, modern web browsers limit the amount of browsing history accessible via JavaScript.
What is Browsing History?
Browsing history refers to the list of web pages that a user has visited over a while. Browsers typically store this data locally, allowing users to navigate back and forth through the pages they've visited.
The window.history Object
In JavaScript, the window.history object allows interaction with the browser's history stack. However, this object does not provide direct access to the URLs of the user's browsing history due to privacy restrictions. What you can access, however, are methods that let you manipulate the navigation history within the context of your website.
Methods of window.history
history.back(): This method behaves similarly to clicking the browser's "Back" button. It moves the user back to one page in the session history.
window.history.back();
history.forward(): This method works like the "Forward" button in the browser, moving the user forward one page in the session history.
window.history.forward();history.go(): The go() method allows for more fine-tuned control, moving forward or backward by a specific number of pages in the history stack.
window.history.go(-2); // Goes back two pages
window.history.go(1); // Goes forward one pagehistory.pushState(): The pushState() method allows you to add a new entry to the history stack, without reloading the page.
history.pushState({page: 1}, "title 1", "?page=1");
history.replaceState(): Similar to pushState(), replaceState() modifies the current entry in the history stack instead of creating a new one. history.replaceState({page: 2}, "title 2", "?page=2");
JavaScript program to access browsing history
Following is the code to access browsing history in JavaScript ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Program to access browsing history</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see history length</h3>
<button class="Btn">FORWARD</button>
<button class="Btn">BACKWARD</button>
<h3>Click on the above button to go forward or backward</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelectorAll(".Btn");
BtnEle[0].addEventListener("click", () => {
resEle.innerHTML = window.history.length;
});
BtnEle[1].addEventListener("click", () => {
window.history.forward();
});
BtnEle[2].addEventListener("click", () => {
window.history.back();
});
</script>
</body>
</html>
Output
The above code will produce the following output ?
On clicking the ?CLICK HERE' button ?
On clicking the ?BACKWARD' button u would go to previous page in history ?
Use Cases of History Manipulation
Below are the use cases of history manipulation ?
-
Single Page Applications (SPAs): SPAs rely heavily on manipulating the browser's history to simulate page navigation without reloading the page. Methods like pushState() and replaceState() are used to manage the history stack in a way that enhances the user experience.
- Custom Navigation Buttons: Developers often use history methods to create custom navigation buttons or to control the flow of users through an app, especially in cases where you want to avoid full-page reloads.
468 Views
