Caching is one of the things you can do to improve your application performance. In JavaScript programming, we have sessionStorage and localStorage API to do the caching. sessionStorage is the browser’s storage that will keep for that session only. So when you close the tab, it will disappear. Meanwhile localStorage more persistence.
When you caching something, you will get benefit from it because you don’t need to retrieve again some data. But also if you don’t use it in a good manner, it will leverage bugs on your system. For instance, you cache User data, but at the same time, someone changed your User data. For this case of course when you open your apps, it will display the wrong output because we still get data from the cache instead of retrieving it from the database.
That is why usually I prefer to use sessionStorage because of its nature. I don’t need to have a procedure to clear the cache because the user will do it automatically when they close the browser. But of course, when that user needs the data, it will retrieve again which is not so good compare to localStorage.
One thing you must consider before you cache something, you need to know what type of data you can cache. It is very important to know before doing it. If your data always change all the time. Then you don’t need to cache it.
This is API for the cache using sessionStorage (you can change it into localStorage if you want to):
How to use it: