close
address. Gaston Geenslaan 11 B4, 3001 Leuven
s.
All Insights

Changing the browser URL without reloading the page

Changing the browser URL without reloading the page. Handy when you want to keep the filters on a web page when the browser reloads is easy to accomplish with the browsers history API.

Written by
Sam Hendrickx
Founder Raccoons

e.g. To keep the filters on a web page when the browser reloads is easy to accomplish with the browsers history API.

Assume we have a page like this (don’t mind the styling):

Example web page

You have some filters coffee, wine, etc and a list that’s going to be filtered with a result like below:

Filtering the webpage

To keep the list filtered after a reload you can use the history api, namely the history.pushState

It is as simple as:

history.pushState(null, ‘’, theUrlYouWantItToBe);

In our case:

const search = '?filter=["wine","milk"]';
history.pushState(null, ‘’, location.origin + search);

You can find the full snippet below to play with:

To easily serve a local file you can use http-server

npm install http-server -g

Create an index.html file with the code from the snippet. In the folder serve the file with the following command

http-server

And boom! 💥

Written by
Sam Hendrickx
Founder Raccoons

Subscribe to our newsletter

Raccoons NV (Craftworkz NV, Oswald AI NV, Brainjar NV, Wheelhouse NV, TPO Agency NV and Edgise NV are all part of Raccoons) is committed to protecting and respecting your privacy, and we’ll only use your personal information to administer your account and to provide the products and services you requested from us. From time to time, we would like to contact you about our products and services, as well as other content that may be of interest to you. If you consent to us contacting you for this purpose, please tick below:

By submitting this form, you agree to our privacy policy.

In order to provide you the content requested, we need to store and process your personal data. If you consent to us storing your personal data for this purpose, please tick the checkbox below.

More blog articles that can inspire you

04/08/2022

Part-time student, part-time crowdfunding platform developer

As a student worker, TPO Agency presented me with a challenge. They asked me if I could further work on CrowdCollect, my...

what we do

Socials

address. Gaston Geenslaan 11 B4, 3001 Leuven