How does the history Javascript object work?

Question

I wonder if there is a limit of Urls to be recovered or not, he has access to the entire history ?

Answer 1

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

The estate length returns the number of Urls in the history list.

var num = window.history.length;

The estate current contains the full URL of the current history entry.

var urlAtual = window.history.current

The estate next contains the full URL of the next element in the history list. It is the same as clicking a button Move forward.

var avancar = window.history.next

The estate previous contains the full URL of the previous element in the History list. It is the same as clicking a button Come back.

var voltar = window.history.previous

You can use one of the 3 methods:

• back(): Load the previous URL into the history list. window.history.back();

• forward(): Load the next URL into the history list. window.history.forward();

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

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

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

Suppose 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 will not cause the browser to load bar.html or even verify that bar.html exists.

pushState() has three parameters: a state object (Whenever the user navigates to the new state, an event popstate is shot and property state of the event contains a copy of the status object of the popstate), one title (Firefox currently ignores this parameter, although it can use it in the future. Passing the empty string here should be safe against future changes in the method. Alternatively, you could pass a short title to the state you are moving to. ) and (optionally) a URL (The URL of the new log entry is given by this parameter).

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

Besides the first script, suppose http://mozilla.org/foo.html also executes this other:

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

Suppose the user now navigates to http://www.microsoft.com and then click 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 deviate bar.html.

The method history.replaceState() 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 entry in the global browser history. This method is useful when you want to update the status object or URL of the current history entry in response to some user action.

Source: W3C and MDN

On the limitation, has a question similar to stackoverflow in English, saying that the window.history.length does not exceed 50. One of the comments says that this may well be a specific limit of the browser. According to this reply, 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.

Answer 2

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

Definition and Usage

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

---

The method back() load previous history URL.

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

---

That’s the same click on the button Come back browser or use 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 the history.

Function that "disables" the button Come back 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 above code works, but if the user right-click on the button Come back browser and choose a history item the function does not prevent.