Computer >> Computer tutorials >  >> Programming >> Javascript

JavaScript History object


The JavaScript History object contains the list of URL visited by the user and allows us to move back or forward in the history list and also load some url from the history list.

Following is the code for implement History object in JavaScript −

Example

<!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;
   }
   .sample {
      font-size: 18px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript History object</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to check our history length
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   document.querySelector(".Btn").addEventListener("click", () => {
      sampleEle.innerHTML = "Your history length is = " + history.length;
   });
</script>
</body>
</html>

Output

JavaScript History object

On clicking the ‘CLICK HERE’ button −

JavaScript History object