node.jshttpcachingvue.jsclientcache

Is there a way to cache files in client computer permanently?


I have a web app, that serves images of scanned old documents with their transcript, it's a lot of images about 5 gigs of images, and the client needs to browse them on regular basis.

I need a solution to cache the images in the client side, since the images are immutable, they should be fetched from the server only once.


Solution

  • That would allow you to cache a huge amount of GB on the clients computer. I can't see how that would work out long-term (user clearing cache, changing browser, computer, etc). This sounds like a poor solution to the problem.

    With that being said, you should look into IndexedDB:

    IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

    Notes:

    • This feature is available in Web Workers.
    • IndexedDB API is powerful, but may seem too complicated for simple cases. If you'd prefer a simple API, try libraries such as localForage, dexie.js, ZangoDB, PouchDB, and JsStore that make IndexedDB more programmer-friendly.