What is the method of front-end persistent storage with simple operation, good compatibility and can store a large amount of data?

recently the development process encountered a problem:
there is a large amount of data on the page that needs to be temporarily stored, used in other modules, and cleared when the page is closed.
the original sessionStorage, is easy to use and has good compatibility. Until once, the flow graph of 6000 nodes information was saved at one time, and then the storage exploded. (Google browser 66.0.3359.139 (official version 32-bit))

assume that the storage capacity of sessionStorage is 5m, and the amount of flow graph data of 6,000 nodes is more than 5m, so it is convenient for calculation to take 6000 nodes / 5m as a unit.
in the requirement, there may be 10, 000 node data in a flow graph. That is, one-time storage reaches at least 10m .
in addition, there will be multiple flow graphs on a page, so to be on the safe side, the total storage of is approximately 100m .

the idea that comes to mind for the time being is that the storage of
1 data is handed over directly to the background. Advantage: the problem of data storage is solved. Disadvantages: the request is time-consuming, unstable and inconvenient to clear.
2 uses indexedDB. Pros: enough storage, no background. Disadvantages: compatibility is not good, API operation is not convenient.
3 uses other open source plug-ins. This has not found a more suitable for the time being, consult the localForage documents, see the operation is very convenient, but it seems to have a storage capacity of 5m.

Front-end-optimization front-end html5 javascript
May.26,2021

A brief introduction to JS libraries that break through the local offline storage limit of 5m

look at your description, I think indexedDB is the most appropriate
, but what do you mean by compatibility is not very good?
I mean, according to the audience and scenarios of your product, are there any rigid requirements for compatibility-related
compatibility such as the browser version?
if not, use indexedDB

it is recommended that: 1 the storage of data is directly handed over to the backend. In this way.
the front-end storage design is originally used to store some small temporary data, your large data is no longer suitable, the background is more suitable for this, there are many cache frameworks can be used, ehcache,redis and so on, very suitable for this.

if the backend implementation is reasonable, the interface provided is stable, it can respond quickly, the humanized api, request is time-consuming, unstable, and the cleaning operation is not convenient.

Previous: The vue route jumps, the browser returns the key and clicks the link, but the page has not changed.

Next: Has anyone ever used the plug-in vue-orgchart or jq's orgchart? How do I add a click event to a node?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b31889-2bd87.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b31889-2bd87.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?