HTML5 History API - What is the max size the state object can be?

user_243494 0
Viewed 8062

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 can implement is? Can I reasonably expect major browsers to provide me with at least 100kb?

EDIT: I tested it out with Chrome, and it was still working for state objects over 1MB.

pushstate html javascript
4 Answers

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.

function beforeNavigate(){
    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);
            }
         });
    }
});
user_101417200
Related