JavaScript history object explained

JavaScript history object explained

Preface:

When we browse a web page, we may not pay much attention to the operations of moving forward and backward. However, when developing, have you ever thought about what happens when you jump between pages, how the browser saves page information, and whether you need to reload the page when you return to the previous page? There will be many questions. To solve these problems, you first need to know the history object under window in the browser. This article will summarize the relevant knowledge points of this object in detail.

history object represents the user's navigation history since the current window was first used. Because history is a property of window , each window has its own history object. For security reasons, this object does not reveal the URLs that the user has visited, but it allows you to move forward and backward without knowing the actual URL.

1. Route navigation

history.go() method navigates in any direction through the user's history, either forward or backward. This method accepts only one parameter, which can be an integer representing how many steps to move forward or backward.

 history.go(-1);// Go back one pagehistory.go(1);// Go forward one pagehistory.go(2);// Go forward two pages//

go() has two shorthand methods: back() and forward().

history.back(); // Go back one page history.forward(); // Go forward one page

The history object also has a length attribute. history.length == 1 means that this is the first page in the user window.

histroy 's go method, back method, forword method, and the user's manual forward and back buttons on the browser will cause the page to refresh and jump.

2. History State Management API

(1) hashchange event

hashchange：history object is hashchange , which is triggered when the hash of the page URL changes, and developers can perform certain operations at this time. The hashchange event is fired when the fragment identifier of a URL changes (the portion of the URL following the # sign, including the # sign). The state management API allows developers to change the browser URL without loading a new page.

For example: pushState and replaceState methods, the page will not be refreshed, but the route will change.

(2) popstate event

When the active history entry changes, a popstate event is fired. If the history entry being activated was created by a call to history.pushState （） , or was affected by a call to history.replaceState（） , the state property of the popstate event contains a copy of the history entry's state object. Note that calling history.pushState() or history.replaceState() will not trigger a popstate event. This event is triggered only when a browser action is taken, such as when the user clicks the browser's back button (or calls history.back() or history.forward() in Javascript code).

(3) history.pushState() method

pushState() method adds a state to the history stack of the current browser session. This method receives three parameters: a state object, a title for the new state, and an (optional) relative URL. After pushState() method is executed, the state information is pushed to the history record and the browser address bar changes to reflect the new relative URL. The URL bar shows the new address, but does not load the page or even check if the page exists. This method increases history.length

(4) history.replaceState() method

replaceState() method modifies the current history entry. This method receives three parameters: a state object, a title for the new state, and an (optional) relative URL. After r eplaceState() method is executed, the current state object or the URL of the current history entity will be updated to respond to the user's action. The URL bar will display the new address, but the page will not be loaded or even checked to see if the page exists. This method does not increase history.length .

<body>
  <button onclick="handleNext()">Click me to the next page</button><br>
  <button onclick="handleLast()">Click me to the previous page</button><br>
  <script>
    window.onload = function () {
      console.log(window.history);
    }
    window.addEventListener('hashchange', function () {
      console.log('The hash has changed!')
    }, false);
    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    });
    function handleNext() {
      const state = { userId: "1234", page: "2" }
      const title = 'Two'
      const url = 'page2.html'
      window.history.pushState(state, title, url)
      console.log(window.history);
    }
    function handleLast() {
      const state = { userId: "1234", page: "21" }
      const title = '一'
      const url = 'page21.html'
      window.history.replaceState(state, title, url)
      console.log(window.history);
    }
  </script>
</body>

The results are as follows:

3. Supplement: URL hash

hash of the URL is the anchor (#), which essentially changes href attribute of window.location . We can change the href by directly assigning location.hash , but the page will not refresh.

As shown in the following figure:

Last words:

This is the end of this article about the detailed explanation of the avaScript history object. For more information about the history object, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of JavaScript BOM composition and common events
  • Detailed explanation of BOM and DOM in JavaScript
  • Principle analysis of javascript History object
  • JavaScript navigator.userAgent obtains browser information case explanation
  • Use JS location to implement search box history function
  • JavaScript BOM location object + navigator object + history object

<<:  MySQL table return causes index invalidation case explanation

>>:  Using VMware IOInsight to perform refined virtual machine storage performance monitoring

Recommend

How to enhance Linux and Unix server security

Network security is a very important topic, and t...

Solution to the problem that the virtual machine Ubuntu 16.04 cannot connect to the Internet

I just installed Ubuntu and there was no network ...

Several ways to easily traverse object properties in JS

Table of contents 1. Self-enumerable properties 2...

10 Tips to Improve Website Usability

Whether it is a corporate website, a personal blo...

Two simple menu navigation bar examples

Menu bar example 1: Copy code The code is as foll...

Centos8 (minimum installation) tutorial on how to install Python3.8+pip

After minimizing the installation of Python8, I i...

Detailed explanation of MySQL foreign key constraints

Official documentation: https://dev.mysql.com/doc...

Tutorial on how to install and configure the unzipped version of MySql under Windows 10

Install the unzipped version of MySql database un...

Detailed explanation of vue.js dynamic components

:is dynamic component Use v-bind:is="compone...

JS realizes the effect of Baidu News navigation bar

This article shares the specific code of JS to ac...

Detailed tutorial on installing CUDA9.0 on Ubuntu16.04

Preface: This article is based on the experience ...

Perfect solution to the problem of webpack packaging css background image path

Inside the style tag of the vue component, there ...

Detailed explanation of the process of querying user permissions using mysql statements

In MySQL, how do you view the permissions a user ...

Implementation of CSS heart-shaped loading animation source code

Without further ado, let me show you the code. Th...

Detailed analysis of classic JavaScript recursion case questions

Table of contents What is recursion and how does ...