Are double forward slashes ok in URL hash fragment

Question

I am building the fragment string in javascript from a form and setting with window.location.hash. If a user leaves a form input blank the resulting URL can be

example.com/#search/cars//blue//mazda

Note the //

If say the price was entered it would be

 example.com/#search/cars/20000/blue//mazda

Now this works fine. Is it bad practice?

Answer 1

I think that pushState and the other History API methods are so nascent that standards haven't yet evolved. As opens a recent W3 work on Repurposing the Hash Sign for the New Web:

The Hash sign (#) in a URI was originally used to introduce a static "fragment identifier", but recently it is being used in many more complex ways as it is set by and interpreted by JavaScript in Web applications.

It might violate normal behavior to use double slashes in the pathname but the hash fragment can be any arbitrary string. Do a typeof and you'll see it's just a normal string. It's not standard and therefore might alienate the typical user experience. Code wise, however, I think you can feel free to you double slashes, triple slashes, or anything else.

One thing to keep in mind is that escaped characters are decoded when read from the window.location.hash property.

Answer 2

Its not illegal however its a little sloppy.

Using window.hashchange event you can do some cool things. You just have to remember to cancel the event when clicked so it doesn't do double refresh. You should detect when the event occurs and modify the form accordingly for example, when the user uses the back button, it will modify the form to the state of the URL but you must distinguish between when the hash changes by your doing through script or by the user pressing back/forward. I have code that does this if you want to look.

When doing hash URLs for ecommerce, they should match actual URLs as well so they are indexable if you were listing permutations for SEO. They should also work using history for back/forward. I wrote some code for that and you can bookmark it on AJAX or actual URL link (www.kitgui.com/docs and www.klim.com/en-us/shop and many many more you can see through www.emeraldcode.com).