JavaScript - hash parameters vs query parameters

In this article, we would like to show you the difference between hash parameters and query parameters.

Quick overview:

Hash parameters

1. appear after the path and query parameters (as the last URL part),
2. start with # character in the URL,
3. can be accessed only from a web browser JavaScript API,
4. change can be detected with the hashchange event,
5. any changes from the web browser address bar do not cause website reloading,
6. are not very good for SEO as they require interpretation by the web browser engine,
7. are useful for SPA routing (single-page applications).

Format:

#parameter1=value1&parameter2=value2

When to use:

When we have a front-end application that does not have any backend, when a website is built only as static content.

Query parameters

1. appear after the path,
2. start with ? character in the URL,
3. can be accessed both from the web browser JavaScript API and from the server-side (are sent in HTTP request),
4. any changes from the web browser addres bar cause website reloading (unless we use the history() API which prevents the reload),
5. are useful for SPA routing (single page applications)

Format:

?parameter1=value1&parameter2=value2

When to use:

1. When we want to have better SEO,
2. with server-side rendering, when we are able to generate the page on the server-side.

See also

1. JavaScript - on location changed event / on url changed event