有没有办法从特定文件中的 contenteditable 数据框中保存和检索文本？ （所有客户端）

Question

I'm making statistical reports for customers and I chose HTML solution as report template.

I have this issue where I want a user to be able to edit a text box of a html document and save it (as soon as he leave the area or when clicking save button) to annotate things like graphics for instance.

The content should be printed each time he opens back the .html file. Also, there are potentially multiple html pages inside the report (one editable box per sub html pages is enough)

Moreover, a big constraint here is that this html file is open locally and should be shared across users (I have to stick with this all-client side solution for now but I'm planning on doing it server side).

As you may have understood already I can't use localStorage solution as it is system/user dependant and data won't stick if people are sharing the report.

I'd rather go with a solution where it is possible to save it in a $UID .txt file for instance (one $UID for each sub pages people wants to annotate) and retrieve it so as long as the state of the editable content is saved at the same place in the report folder architecture, it will be opened as is by every other people when they get this edited report.

Thanks for your time !

A.

EDIT

I should have stipulated few things :

1- The report is composed of hundred of stand-alone html files. It is basic html and javascript components that are translated by a classic web browser without the need of an internet connexion or a localhost server.

2- Folder structure :

root_folder
  |
  |---- index.html (main page to access all sub pages)
  |---- graphics
          |---- graphic1.html
          |---- graphic2.html

3- People need to share the report on their own and there is no user database. The only constraint is that after performing a modification on an editable content box, the text should be written somewhere in the folder structure (see 2) and retrieved automatically the next time some user (either the original editor or the next one on an other computer as long as the first editor shared the whole directory with its own edit) will open (or refresh) the html file.

I know that there are better solutions but I really have to stick with a stand-alone solution for now, hoping that there is a solution to this issue !

Thanks again for your time.

Answer 1

If there is no server-side component and you don't want to use the browser's (sandboxed) local storage (be that LocalStorage, IndexedDb or otherwise) then you are left with FileReader to read data and creating Blob URLs to download data.

The user experience would be something like this:

1. The user opens your (local) .html file
2. They are prompted to open the database (could be text file(s)) with a <input type="file"> .
3. You use the FileReader api to load this file. Note: you can't use fetch or XMLHttpRequest to do this automatically.
4. When the user has finished entered their content, store it in a Blob object and then create a data: -link with createObjectURL . You could put that generated url in a <a href="..." download>Save</a> link.

As it would be up to your users to make sure they select the proper database file(s) and to save them under the right file name, this is not ideal. I would strongly recommend a (self-)hosted solution. That could deal with multiple concurrent users a whole lot better, too.

A server-side component doesn't have to be complex: If you start in a language you're comfortable with and use a SQLite database, you'll go very far in a less complex set-up than what you're describing.