What's the right approach to saving and loading files on client-only web apps?

Question

I'm developing an application that will allow the user to create his/her own data, and since I don't have a backend or a database, everything just lives on the user's session.

My ideal solution would be the following:

1. User works with the application, clicks on "Save", gets a download prompt, downloads a file to his/her filesystem
2. User clicks on "Load", a file input dialog gets shown, user picks his/her file, and the data is back again on the app.

I thought in using the FileSystem API, but it will just work on a sandboxed environment which defeats the ability for the user to work with the data in another browser.

I know I can simulate a download by just stringifying the data dropping it into a window to make a download. However, when I want to load this data again using input type=file, I don't have the ability to read the actual contents of the file, so it's a one-way path.

Some other apps usually just displays the contents of the file to the user and make the user copy/paste content, but I would like to simplify to the user.

Finally, I would like to support at the very least the latest version of desktop browsers.

What option would be the most suitable for this situation?

Answer 1

You should offer files for download, then read them from <input type="file"> using FileReader.