Reliably change page title in browser history via JavaScript

Short answer: there seems no way you can keep different title records for the same url in Chrome.

Disclaimer: I just stumbled upon this question and had no prior experience about it. Nonetheless, the question was so clear and interesting that I couldn't help but do some experiment:

First of all, I agree that the history records (i.e., the page titles) shown in the history tab are NOT so reliable (maybe a bug or cache).

So I decide that I will look into the database file for Chrome history, for example, using DB Browser for SQLite.

To my surprise, Chrome history keeps only one version (the latest) of title for each url. And when I do History.replaceState({}, "My custom title", window.location.href);, the title does get updated in the database.

However, @Bekim's method wouldn't change the title in the database.

The issue is that the second parameter to replaceState(), the title parameter, is currently ignored by essentially all implementing browsers. However, the third parameter on pushState, url, is taken into consideration. Unfortunately, it does not work with replaceState (at least not in Chrome or Edge, according to my tests).

With that in mind, from client side, you could use one of the following workarounds, whichever your taste is:

history.pushState({}, "", "my-custom-appendix");history.pushState({}, "", "#my-custom-appendix");

In Chrome, this will create additional entries with a title like http://myurl/my-custom-appendix or http://myurl/#my-custom-appendix (respectively). I believe this is the closest you can get from the client, and the side effect is that you'll get a new history entry in the browser history -- for every visit to your app, you'll essentially see (in increasing timestamp order):

• Standard Title
• http://myurl/my-custom-appendix

You'll see the URL as the title even if you have the second parameter set to a non-empty string (at least that's what's happening on my end).

For a more robust approach, you'd need to use a simple server-side preprocessor AFAIK, like PHP.

Related to angularjs :-

add run method after module :-

.run(function ($rootScope) {

$rootScope.$on('$stateChangeSuccess', function (evt, toState) {    window.document.title = toState.title + ' - example.com';});

});

Your state :-

.state('productDetail', {

    title: 'Details of selected product',    url: '/Detail.html',    templateUrl: '/product-details.html',    controller: 'ProductDetailsCtrl'  })

.state('categoryManager',{

    title: 'Category Manager',    url: '/category-Manager.html',    templateUrl: 'categoryManager.html',    controller: 'categoryManagerCtrl'     });

this will change title according to your state.