15

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?

Jeroen Ooms
  • 31,998
  • 35
  • 134
  • 207

3 Answers3

14

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>
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • Firefox seems to support 1M nowadays, Chromium did not break at 40M. Since IE and old non-blink Edge are becoming irrelevant the practical limits has likely been lifted up. I did not test Safari and mobile browsers though. – Maciej Krawczyk Sep 22 '22 at 08:40
  • 1
    Agreed, but emphasis on *becoming* irrelevant... some of us still need to support IE... :-( – scunliffe Sep 23 '22 at 14:21
-5

Such a misleading explanation. Hash has simply no limits of size and feel free to use it as much as you like. Just remember that its not a url part.

Peter
  • 1
  • 3
    I don't think this is true. Wikipedia says: *The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document.* – Jeroen Ooms Sep 27 '14 at 08:57
-6

What is the maximum length of a URL in different browsers?

This typically does not include the hash part though, so I don't think there's a standard.

I would like to point out that the fragment identifier is typically used to identify a fragment of a document, and shouldn't be used to store the entire state of an app. You should use localstorage instead.

If you would like the ability to share or bookmark, consider storing the app's state on the server-side, and use the fragment identifier to store the id of the stored state.

Community
  • 1
  • 1
Bart
  • 26,399
  • 1
  • 23
  • 24