Home >Web Front-end >JS Tutorial >Stop Using Local State for Filters — Here is why
Have you ever lost all your carefully selected filters after accidentally refreshing the page?
It recently happened to me.
I was checking out a website, I filtered the item to the 20th page, then my mobile Hotspot got disconnected because someone called me.
After the call, the page reloaded and I had to start clicking again to get to the 20th page where I stopped.
What does this mean?
This means your company could be losing a lot of money due to this simple performance issue.
Or, how about a scenario in which you wanted to share your filtered search results with a friend but couldn't?
That's the problem with local state filtering.
Think of shopping on Amazon or any popular e-commerce website you know. Notice how you can:
That's all URL parameters in action!
Why URL Parameters Are Better than Local State:
Whatever that happens, either a network glitch or an accidental reload, the state of your filtered or paginated data remains whenever the page is up again.
Of course, since the data state is kept in the URL, you can easily share it with anybody and they will see exactly what you want them to see.
Instead of: "Hey, select electronics, then set the price range to $100-500..."
Just share: yoursite.com/products?category=electronics&price=100-500
Search engines can find and index your filtered pages. More visibility, more traffic!
I recently searched for a property with a keyword like this: 'Mini flat in Lagos', and one of the results I got on Google landed me on a filtered search result page showing me all available mini-flats in Lagos available on the property listing website.
Cool right?
Want to go back to your previous filter combination? Just hit the back button - it works
NOTE: This isn't about preference but building better, more user-friendly applications. Your users will thank you, and you'll save yourself from countless headaches!
The above is the detailed content of Stop Using Local State for Filters — Here is why. For more information, please follow other related articles on the PHP Chinese website!