What are the differences between history.pushState & location.hash?

javascript html url pushstate fragment-identifier
Krueger picture Krueger · Feb 18, 2012 · Viewed 33.7k times · Source

I'm trying to update the URL using window.location.hash or history.pushState.

What are the differences and advantages of each method?

Answer

Rob W picture Rob W · Feb 18, 2012

location.hash has a better support than the history.pushState method.

The advantage of the pushState method is that you can bind a state to the history entry.

If you don't need this state object, I recommend to use the location.hash property, to have better compatibility with older browsers.

location.hash = 'new-hash';
console.log(history.state); // null or undefined

history.pushState({extraData: "some state info"}, '', 'new-hash'); //<---
console.log(history.state); // [object Object] = {"extraData": "some state info"}

Related questions

SecurityError: The operation is insecure - window.history.pushState()

I'm getting this error in Firefox's Console: SecurityError: The operation is insecure and the guilty is HTML5 feature: window.history.pushState() when I try to load something with AJAX. It is supposed to load some data but Javascript stops executing …

Read More
When I push a new URL to Backbone.history, the query params stays?

Let's say I'm using Backbone pushstate and I navigate to a page with query params: domain.com/user/111?hello=123 When I execute this: Backbone.history.navigate('/settings', true); My settings page loads perfectly, but the ?hello=123 stays in the …

Read More
How do I modify the URL without reloading the page?

Is there a way I can modify the URL of the current page without reloading the page? I would like to access the portion before the # hash if possible. I only need to change the portion after the domain, so …

Read More