Is it possible to cache about 1 GB in the browser?

Question

JavaScript

I plan to write a specific web application. The main requirement is that the user be able to work with the data package regardless of the speed of the Internet connection, including offline. A "data package" is about 300-400 megabytes (the speed of working with it is decent even on weak devices). There are no resources for writing applications for different platforms.
Is it possible to save this amount of data in modern browsers and what is the best way to do it?
Interested primarily in chrome and safari, including on smartphones.

Answer 1

Perhaps of course. To store large amounts of data in browsers, there is a built-in IndexedDB database .
To work with it, we first connect a special library that simplifies input and output:

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.js"></script>

Next, to save some data, we execute in the browser console:

result = await localforage.setItem('key', save_data);
console.log('Данные успешно сохранены:');
console.dir(result);

Where save_data contains the saved data, and key is the key by which it would be possible to access them.
Of the features, in save_data we can put any type of data - even a string, even an array, even an object. Yes, you can even save the file if you wish! At the same time, there are no restrictions on the amount of stored data, you can stuff at least one hundred megabytes, at least three hundred - the built-in storage will gobble up everything.
To retrieve the saved data later, just run:

result = await localforage.getItem('key');
console.log('Данные успешно извлечены:');
console.dir(result);

Data storage period is unlimited. Or until the user manually clears the browser cache.
PS Please note that if you use the word await somewhere in your code inside a function, then such a function must have the async prefix! Otherwise you will get an error. In the console, you can use await directly, but to use await in code, you need the function inside which it is called to be asynchronous !!!

Answer 2

No (5-10 MB maximum), and it sounds stupid. What will users with limited resources do?

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/I... Download everything locally and run some electron. Ps gig in cache is tough! Look at the limits

Answer 4

If you don't need extra libraries, here is my simplified version

let db={
  o:h=>new Promise(r=>{let i=indexedDB.open('you_db');i.onsuccess=()=>r(i.result);i.onupgradeneeded=()=>i.result.createObjectStore('db',{keyPath:'key'})}).then(h),
  t:o=>o.transaction('db','readwrite').objectStore('db'),
  g:(k,h)=>db.o(o=>new Promise(r=>{let t=db.t(o).get(k);t.onsuccess=()=>r(t.result&&t.result.val)}).then(h)),
  s:(k,v)=>db.o(o=>db.t(o).put({key:k,val:v}))
};

use like this:
db.s('sync', save data )
db.g('sync', data => function )