I'm designing a website that needs a pre-loading of a few hundreds of MB client side before being able to use the service. Context: as the service is supposed to be used realtime with the lowest latency possible, then this pre-loading is mandatory; streaming the content "on-demand" is not an option (I have already studied alternate options and I confirm it's necessary).
Question: Since loading 400 MB is quite long for end-users, what options are available such that, if the user closes the browser, and then reopens the website, they don't have to re-download the 400 MB again?
One obvious solution would be localStorage, but this is limited to 10 MB (see What is the max size of localStorage values?).
What other options are there (the stored data should be available from JavaScript)?
I could ask the user to install a Chrome extension, but would it allow storage of more than 10 MB?
Considering only the storage issues... You don't have many choices.
IndexedDb. No further permission is required to build and operate on IndexedDB. IndexedDb is supported by major browser (you have to check for Safari) IndexedDb is a strange object, you will see while you'll study it. You can create, read, update and delete almost as if you were working on a real database. I wouldn't call it a relational database as Oracle, mySQL, Sql server... However, it is a transactional database.
File System Access API. This solution requires the user agreement to consent the access to the user file system (through a "user gesture" and it is lost every time user quit from Browser session - it's boring). It might be fine if your 400 Mb data is not a structured data, e.g. a audio/video file that user plays.
Note that it works even with no extension. More information can be found here. Here is an example: https://googlechromelabs.github.io/text-editor/
I suggest you the first way.