Common methods of history objects

Introduction to History object
Properties in the history object
Methods in the history object

Introduction to History object

The JavaScript history object contains the history that the user has visited in the browser, including pages browsed through the browser and pages loaded in the current page. We can obtain the history object through the history attribute in the window object. Since the window object is a global object, the window prefix can be omitted when using window.history. For example, window.history.go() can be abbreviated as history.go()
:

Properties in the history object

Attributes	illustrate
length	Returns the number of browsing history, including the currently loaded page
scrollRestoration	Using browser features, we can scroll the page to the previously browsed position when returning to the previous page or next page. This attribute has two values, namely auto (indicating scrolling) and manual (indicating no scrolling).
state	Returns the browser's status information under the current URL. If the pushState() or replaceState() method has not been called, the default value null is returned.

Code:


 <script type="text/javascript">
    console.log(history.length);
    console.log(history.scrollRestoration)
    console.log(history.state);
  </script>

Effect:
Insert image description here

Methods in the history object

method	illustrate
back()	Refer to the current page to return to the previous record in the history (that is, return to the previous page). You can also achieve the same effect by clicking the ← button in the browser toolbar.
forward()	Refer to the current page to go to the next record in the history (that is, advance to the next page). You can also achieve the same effect by clicking the → button in the browser toolbar.
go()	Referring to the current page, open the specified history record according to the given parameters. For example, -1 means returning to the previous page, and 1 means returning to the next page.
pushState()	Insert a new history record into the browser's history.
replaceState()	Replaces the current history record with the specified data, name, and URL.


<script type="text/javascript">
      function myBack() {
    
    
          history.back();
      }
      function myForward() {
    
    
          history.forward();
      }
      function myGo() {
    
    
          var num = prompt('请输入一个整数', '1');
          history.go(num);
      }
      function myPushState() {
    
    
          var state = {
    
     'page_id': 1, 'user_id': 5 }
          var title = 'JavaScript'
          var url = 'index.html'
          history.pushState(state, title, url)
          console.log(history.state);
      }
      function myReplaceState() {
    
    
          var state = {
    
     'page_id': 3, 'user_id': 5 }
          var title = 'history'
          var url = 'index.html'
          history.replaceState(state, title, url)
          console.log(history.state);
      }
  </script>
</head>
<body>
<button onclick="myBack()">back()</button>
<button onclick="myForward()">forward()</button>
<button onclick="myGo()">go()</button>
<button onclick="myPushState()">pushState()</button>
<button onclick="myReplaceState()">replaceState()</button>

</body>

Effect:
Insert image description here
ok, the effect can be seen by yourself, the above is the whole content