History.js - Appeding to query string without browser reloading

Question

I want to manually update the url query string without reloading the browser. Apparently history.js https://github.com/browserstate/history.js/ does the job.

I've read several documentation but looks like that framework does a lot more than I need, so I'm confused how to achieve my simple requirement.

Any code snippet's how to achieve it?

Thank you

Answer 1

Try this:

Use history.pushState & history.replaceState methods

Eg: http://html5demos.com/history

Answer 2

You can use the HTML5 history API (http://diveintohtml5.info/history.html). For example:

history.pushState(null, null, new_url);

You can change the page title too:

history.pushState(null, new_title, new_url);

Answer 3

History js provides HTML4 compatibility for the HTML5 History API, hence why it might seem like it may be offering a lot of features.

If you only care about HTML5 Browsers (basically IE10 and above and a majority of most other recent browsers) then using the HTML5 History API will do the job.

history.pushState(state, title, url);
history.replaceState(state, title, url);

Note: State can take an object or null title can take string or null url must take a string

History js can also provides options of how you manipulate the url based on the state. Examples can be whether you use a path like
url "www.site.com/page1/sub-page" or
using hashes "www.site.com/#/page1/sub-page"

But this totally depends on what you hope to achieve.