Max size of location.hash in browser

Question

I would like to use the location.hash to encode the state of my client app, such that users can easily bookmark and/or share the app in its complete state using the URL.

There are a number of (outdated) topics on the max length of a url, particularly limits in internet explorer. However it is not clear what the maximum size of the location.hash is. Because the hash only exists in the client, limitations of http or servers are not relevant.

I made a simple jsfiddle to test this: http://jsfiddle.net/Jz3ZA/. In both Chrome and Firefox (Ubuntu 12.04) hashes up to 50K seem to work. Does this mean I could use them to store state or am I overlooking other limitations?

Answer 1

Based on your JS Fiddle (well a modified version of it http://jsfiddle.net/Jz3ZA/18/ (see code example below)), you can test lots of browsers to get an effective baseline.

• Chrome: 50K+
• Firefox: 50K+
• Safari (iOS): 50K+
• Internet Explorer 11: Fails between 2,025 and 2,050
• Microsoft Edge: Fails between 2,025 and 2,050

Thus regardless what other browsers do support, if you need to support Microsoft Edge or IE11 then you'll need to stay under 2,025 character hashes. Since IE (and thus I'm guessing Edge) has historically had URL length limitations... this may also depend on the length of your base URL.

function testall(){
  var sizes = [10,100,1000,2000,2025,2050,2100,2250,2500,2750,3000,4000,5000,10000, 50000];
  for(var i=0;i<sizes.length;i++){
    var n = sizes[i];
    if(!testhash(n)){
        alert("test failed at hash of length: " + n);
        return;
    }
  }
  alert("all tests passed");  
}

function testhash(n){
    var somestring = "#" + makestring(n);
    window.location.hash = somestring; 
    var success = (window.location.hash == somestring); 
    return success
}    

function makestring(n){
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for(var i=0;i<n;i++){
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}
$("button").on("click", testall);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button>Test!</button>