LocalStorage vs Cache

I think there are two types of caches.

Each browser has a cache that it keeps items in temporarily. In other words, it is used to store web resources locally to speed up loading times upon revisiting a site. As far as I know, we do not access that cache; it is managed by the browser. It is described in:

Definition of browser cache | PCMag
https://www.pcmag.com/encyclopedia/term/browser-cache

There is also the cache interface, as described in:

Cache - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Cache

I am not familiar with that interface but I assume that it is used to store objects locally that exist permanently elsewhere. The Mozilla page describing the interface says that the browser may delete the Cache storage.

LocalStorage would usually be the better choice.

The main difference between local storage and cache lies in their functionality and persistence. Local storage is a technique for preserving key-value pairs in the web browser with no expiration date, ensuring data remains even after page refreshes. On the other hand, cache is used to store web resources locally to speed up loading times upon revisiting a site. Cache is more temporary and typically used for frequently accessed data to reduce processing and loading requirements.

In a real-life example, consider local storage as a storage unit where you keep important documents that you want to access anytime, even if you leave and come back later. This storage unit ensures your documents are always available. In contrast, cache is like a temporary workspace where you place tools and materials you frequently use for a specific project. These items are readily accessible to speed up your work during that project but are not meant for long-term storage.

Therefore, local storage is ideal for storing user-specific data that needs to persist across sessions, while cache is more suited for optimizing performance by storing frequently accessed resources locally for quicker retrieval.