更改查询字符串而不重新加载/刷新[重复]

Question

This question already has an answer here:

• Updating address bar with new URL without hash or reloading the page 3 answers

I want to change my url on click without refreshing page. For example my URL is http://test.com?search=test

When I click any filter value on the search page like "category" then my URL should be:

http://test.com?search=test$category=cat1

When I click on another category it should be:

http://test.com?search=test&category=cat1,cat2

When I click a brand then the URL should be:

http://test.com?search=test$category=cat1,cat2&brand=br1

When I deselect a category then the URL should be:

http://test.com?search=test$category=cat2&brand=br1

Please help me.

</div>

Answer 1

You can change it via the history api

window.history.pushState("object or string", "Title", "/new-url");

In this case the relative /new-url will be set with the new title. You can experiment with it in the console. If you input this on stackoverflow.com the url will magically change to https://stackoverflow.com/new-url