How does the Javascript history object work?

The history object contains the URLs visited by the user (within a browser window). It is part of the window object and is accessed through the window.history property.

The length quer property returns the number of URLs in the history list.

var num = window.history.length;

The current quer property contains the full URL of the current history entry.

var urlAtual = window.history.current

The next queue property contains the full URL of the next element in the history list. It is the same as clicking a Next button.

var avancar = window.history.next

The previous queue property contains the full URL of the previous element in the History list. It is the same as clicking a Back button.

var voltar = window.history.previous

You can use one of 3 methods:

• back() : Loads the previous URL in the history list. window.history.back();

• forward() : Loads the next URL in the history list. window.history.forward();

• go() : Loads a specific URL from the history list. window.history.go(-1);

A note about go() , if you are on a page and enter another registration page, for example, within this registration page contains a back button with a onclick="javascript:history.go(-1);" property, when you click the button you will be redirected to the last page you accessed before the registration page.

HTML5 introduced the history.pushState() and history.replaceState() methods, which allow you to add and modify history entries, respectively. These methods work in conjunction with the window.onpopstate event.

Assume that http://mozilla.org/foo.html executes the following JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

This will cause the URL bar to display http://mozilla.org/bar.html , but it will not cause the browser to load bar.html or even check that bar.html exists.

pushState() has three parameters: a state object (Whenever the user navigates to the new state, a popstate event is triggered and the state property of the event contains a copy of the entry state object of% (ie, popstate ), title (Firefox currently ignores this parameter, although you can use it in the future.) Passing the empty string here should be safe from future changes to the method. which you are moving.) and (optionally) a URL (The URL of the new history entry is given by this parameter).

Note: The state object can be anything that can be serialized. Because Firefox saves state objects on the user's disk so they can be restored after the user restarts the browser, we impose a 640k character size limit on the serialized representation of a state object. If you pass a state object whose serialized representation is greater than this to pushState() , the method throws an exception. If you need more space than this, you will be encouraged to use sessionStorage and / or localStorage .

In addition to the first script, suppose that http://mozilla.org/foo.html also runs this one:

history.replaceState(stateObj, "page 3", "bar2.html");

Now suppose that the user now navigates to http://www.microsoft.com , and then clicks again. At this point, the URL bar will display http://mozilla.org/bar2.html . If the user clicks again, the URL bar will display http://mozilla.org/foo.html and will totally defaul bar.html .

The history.replaceState() method operates exactly as history.pushState() , the difference is that it modifies the current history entry instead of creating a new one. Note that this does not prevent the creation of a new global browser history entry. This method is useful when you want to update the state object or URL of the current history entry in response to some user action.

Source: W3C and MDN

On the limitation, you have a similar question in stackoverflow in English, window.history.length is only 50. One of the comments says that this may well be a browser-specific limit. According to this response , if you need it to persist between sessions and survive a cleanup of user information (cache, localStorage , etc.), you can adopt different solutions. In the answer, the author suggests this code:

window.onpopstate = function(event) {
    var count = parseInt(localStorage.getItem('history-changes-count'), 10);
    localStorage.setItem('history-changes-count', ++count);
};

Note that onpopstate is invoked only after a user action , it does not work if you modify the history programmatically.

According to W3C the history method has access to everything the browser history.

Definition and Usage

  

The back () method loads the previous URL in the history list.

  

The method back() loads the previous URL of the history.

This is the same as clicking the "Back button" in your browser, or history.go(-1) .

This is the same as clicking the Back button of the Browser or using history.go(-1) - back a page.

  

Note: This method will not work if the previous page does not exist in the history list.

Note: This method will not work if the previous page does not exist in history.

Function that "disables" the Back button of the browser.

(function (global) {
    if(global === undefined)
    {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {

        noBackPlease();

        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }

            e.stopPropagation();
        };

    };

})(this.window);

This code above works, but if the user right-clicks the Back button of the browser and picks an item from the history the function does not prevent.