Html5 History Api - What Is The Max Size The State Object Can Be?

The pushState method accepts a state object. Firefox documents say the maximum size of this object is 640kb. Is it defined in the specs what the smallest maximum size a browser c

Solution 1:

The specification doesn't set out a limit, however the various browser do have their own limits.

Firefox's is well documented and as you said, it's 640kB ("as much RAM as anybody will ever need").

I couldn't find Chrome or Internet Explorer's listed anywhere, but some quick testing shows:

Chrome working at least up to 10MB (and possibly further),

IE hitting the limit at 1MB (in IE11, which is all I have handy).

So, to summarise for the people of the future: history.state object size limit is: 640kB for Firefox, 1MB for Internet Explorer 11 and at least10Mb for Chrome.

EDIT: Versions tested: IE: 11, Chrome: 33, Firefox: Irrelevant as they document the max size on MDN for you :).

Solution 2:

No. The normative document here is http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-pushstate and it doesn't even mention a limit for the data size. A different limit is suggested however:

User agents may limit the number of state objects added to the session history per page.

As you can see on this example the specification generally avoids mentioning any hard limits and leaves them at the discretion of browser makers. So even if the spec is revised at some point in future to consider the possibility of data size limits, it is unlikely to give you a real number. Instead it will be "big enough for common use cases".

Solution 3:

only see the MDN tells that FireFox impose a size limit to 640K, don't know other browsers. https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Solution 4:

Painstakingly, I have a page that is exceeding the character limit on IE11. I did a substring operation to get an exact character count since I couldn't find it anywhere. The answer is that (at least on IE11) 524282 characters are allowed to be passed to the pushState/replaceState. I handled that via the following code:

function pushState(data, title, url) {
  if (data.length > 524282) {
      //can't push the data to the History API--pass null
      history.pushState(null, title, url);
      history.replaceState(null, title, url);
  }
  else {
    history.pushState(data, title, url);
    history.replaceState(data, title, url);
  }
    document.title = title;
}

I call beforeNavigate to save any current position information or state changes made by the user before loading the new content via an ajax request.

functionbeforeNavigate(){
    if ($("#container").html().length <= 524282) {
        //save current state to history before navigating via ajax
        history.replaceState($("#container").html(), document.title, window.location.pathname);
    }
}

Handle pushing the back and forward buttons by listening for popstate. If we passed a null value for data, then e.state will return null, and we need to load the stored url via an ajax request.

window.addEventListener('popstate', function (e) {
    if (e.state!=null) {
        $("#container").html(e.state);
    }
    else {
        //load the partialpage into the container(a full html page is not returned by the ajax query for my site)
        $.ajax({
            url: location.href,
            type: "GET",
            success: function (data) {
                $('#container').html(data);
            }
         });
    }
});