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 browser’s storage that will keep only for that session only. So when you close the tab, it will disappear. Meanwhile localStorage more persistance.

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 bug 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 wrong output because we still get data from cache instead of retrieve from database.

That is why usually I prefer to use sessionStorage because of its nature. I don’t need to have procedure to clear the cache because user will do it automatically when they close the browser. But of course when that user need 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 do it. If your data always change all the time. Then you don’t need to cache it.

This is API for cache using sessionStorage (you can change it into localStorage if you want to):

How to used it: