Up until now, I had always sent an AJAX request and run location.reload() when the request is finished, updating the page. Recently, for some reason, the old input values are still kept when the page is reload. I suspect the culprit is Firefox's cache, because when I remove the cache or just reload the page normally with F5, the input values are updated as well. The same function still work on Chrome and Edge.
I tried out window.location.href = window.location.href, same thing happened.
I tried out window.location.replace(window.location.href), same thing happened.
I did my research and saw some people suggested location.reload(true), it worked perfectly. However, I also read that this method is deprecated and had been removed in some browsers already. I don't want to build my code base on such uncertainty.
Cache busting technique can lead to caching overhead, and I don't want to slow down the page performance.
Thus, my question is: which code can I write to tell the browser to do a forced reload, removing all cache?
I only want to remove cache in some functions, not all of them. I am not a fan of form.
I've read about the reload not being supported, however this seems to suggest it's fine (please someone correct me if I'm misunderstanding here, it's probably on Firefox support guaranteed): https://developer.mozilla.org/en-US/docs/Web/API/Location/reload
I've also used it and never had issues, serving Chrome and Edge.
You could also try adding dummy data to the end of your URL on reload, with use of ?, although I have not used this method myself.
In future projects front-end frameworks such as Vue, React, etc, will allow you to use State, which can prevent the whole reloading situation, might be worth checking out in future.