A Guide to Save html table data locally with electron

Issue

I'm new to coding and its a lot of try and error. Now I'm struggling with html tables.

For explanation: I am building an Electron Desktop application for stocks. I am able to input the value via GUI in an html table, and also export this as Excel file. But, every time I reload the app, all data from the table are gone. It would be great to save this data permanently, and simply add new data to the existing table after an application restart.

What's the best way to achieve this?

In my mind, it would the best way to overwrite the existing Excel file with the new work (old and new data from the table), because it would be easy to install the tool on a new PC and simply import the Excel file to have all data there. I don't have access to a web server, so I think a local Excel file would be better than a php solution.

Thank you.

<table class="table" id="tblData"  >
    <tr>
            <th>Teilenummer</th>
            <th>Hersteller</th>
            <th>Beschreibung</th>

        </tr>

</table>

This is the actual table markup.

Solution

Your question has two parts, it seems to me.

1. data representation and manipulation
2. data persistence

For #1, I'd suggest taking a look at Tabulator, in particular its methods of importing and exporting data. In my projects, I use the JSON format with Tabulator and save the data locally so it persists between sessions.

So for #2, how and where to save the data? Electron has built-in methods for getting the paths to common user directories. See app.getPath(name). Since it sounds like you have just one file to save, which does not need to be directly accessible to the user, appData is probably a good place to store it.

As for the "how" to store it – you can just write a file to that path using Node fs, though I like fs-jetpack too. Tabulator can save data as well.

Another way to store data is with electron-store. It works very well, though I've only used it with small amounts of data.

So the gist is that when your app starts, it loads the data and when the app quits, it saves the data, along with any changes which have been made, though I'd suggest saving after every change.

So, there are lots of options depending on your needs.

Answered By - spring