Preserving Users’ Actions through URL’s Query String
This topic is so simple, yet neglected by many engineers in their day-to-day tasks. So here’s the problem statement; we need to preserve users’ actions that they might want to pick it up upon refreshing their page. And the simplest implementation of this idea is for page filters.
Let me work my idea from there, and note I’ll be using Kargo’s website and Adidas’ website back and forth as examples. I have to give kudos to Adidas to give me the inspiration from years back.
This is their products page, you can see that it’s clearly stated that it’s now showing All Products that are available on Adidas’ website. But now let’s see when we select a specific Product Type. Here it goes.
There are 2 important things to note that are happening both in the UI and in the URL. First, UI clearly indicates that we’re no longer in the default view for the products page We’re seeing the text explicitly tells us that we’re on the Athletic & Sneakers section.
And for the URL, we’re given an indicator of what kind of filter is being applied. The important thing on this one is to preserve the filter so that when a user tries to reload the page, the same filter is still applied.
Query: “search?producttype_en_us=athlethic_sneakers”
The same idea applies to our Kargo TMS, in which in this example we’re filtering the shipments by statuses. Once we clicked Apply then we will save that filters in the URL to preserve the filters upon page refresh.
Query: “planned?status=bidding,unassigned”
Here you can see that we updated the URL with the applied filters, so then when a user tries to reload the page, the same filter still applies. And when users remove or update the filters, we also need to update the URL once again. Note that this is not the only way to preserve the filters as you might already guess: why not use local storage? Well, indeed you can, but there’s one good caveat why you might want to use URL instead.
You should use URL to store users’ action instead of local storage when the goal is for sharing the same view with other users. You can achieve the same thing with local storage when you don’t need to share that information with others.
So the key takeaway is to utilize the URL to store more information than just which page to show from the engineering’s perspective. A query string is one option to replace local storage for better sharing purposes.
Lastly, here’s an NPM package that would be useful to implement what I’ve covered above here. Hope it can be a reminder for you to utilize other places to store information rather than just local storage! :)
