'How online in browser Code Editor like Code sandbox stores files in browser?
How code sandbox and stackblitz like online in browser code editors store the files in the browser?
Solution 1:[1]
There are various storage APIs available in all major web browsers, Introduced in what's commonly thought of as being part of HTML5. Nowadays, may of these technologies are extending beyond HTML5 - and are growing into standards of their own.
These include:
- LocalStorage (persists between page loads)
- SessionStorage (goes away between page loads),
- IndexedDB (a SQL database in which the browser stores content specifically for that website) - also persists between page loads.
There are various sizing limitations (such as 5MB for localStorage and sessionStorage).
Learn more about IndexedDB (basically an SQL database), here: https://www.w3.org/TR/IndexedDB/
Solution 2:[2]
@Derrick's answer is good when it comes to web storage, but it doesn't explain how the code editors do it. If you are interested in how they do it, that would require a backend. Many cloud/backend storage providers, such as Amazon S3, enable them to store the files and then run them in a server on a VM on their own backend after transferring them to the frontend for you to edit. Once you edit them, it re-saves them to the storage backend. This allows them to persist an indefinite number of files for an indefinite amount of time.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Derrick |
| Solution 2 | ztcollazo |