How can I remove the query string from the url after the page loads?

Question

I have a URL with a long query string attached to it. After the page loads, I do not require the query string. So I want to remove the query string from the address bar with

Answer 1

I want to add one more way to do this, especially for the ones who are using $routeProvider.

As it has been mentioned in some other answers, you do this by using:

var yourCurrentUrl = window.location.href.split('?')[0]; 
window.history.replaceState({}, '', yourCurrentUrl ); 

or by creating a new record in history stack:

window.history.pushState({}, '', yourCurrentUrl );  

For a very detailed and nice explanation about doing with history.pushState and history.replaceState , you can read this post on SO .

HOWEVER if you are using Angular $routeProvider in your app, then it will still capture this change if that matches with any existing pattern. To avoid that, make sure your $routeProvider has reloadOnSearch flag set to false because by default it is true .

For example:

$routeProvider.when("/path/to/my/route",{
   controller: 'MyController',
   templateUrl: '/path/to/template.html',
   //Secret Sauce
   reloadOnSearch: false//Make sure this is explicitly set to false
});