如何让Electron-App中的用户数据持久保存在本地存储中？

Question

我正在使用电子构建一个待办任务应用程序。由于我是新使用它，我发现了很多问题，使已上传的任务在应用程序中持久存在。

我通过用户填写的表单创建任务。这将使用动态 HTML 创建任务。

（Div形式如下所示）

<div class="div_GEN_form" id='div_GEN_form'>
        <div class="form_content" id="form_content">
            <div class="class_form_title">
                <span class="class_title_content_form">Add your task</span>
            </div>

            <form id='GEN_form' name='GEN_form' class="form"></form>
            <br><br>

            <input type="image" src="./icons/BACK.png" alt="Back" class="BACK_img" onclick="DOM_class.CloseFormDiv();">
            <input type="image" src="./icons/ADD.png" alt="Submit" class="ADD_img" id="submit_button">
        </div>
    </div>

真正的问题是我找不到解决方案来使已添加的任务永久存在，因为当我关闭应用程序时，每个任务都会消失。这就是我正在尝试的方法：

static AddDataToTable(typeImageSrc, date, name, comments) {
        const table = document.getElementById('id_data_table');

        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        const taskExists = tasks.some(task => task.date === date && task.name === name && task.comments === comments);

        if (!taskExists) {
            const newRow = document.createElement('div');
            newRow.className = 'data_row';

            newRow.innerHTML = `
                <div class="data_cell"><img src="${typeImageSrc}" class="table_image"></div>
                <div class="data_cell">${date}</div>
                <div class="data_cell">${name}</div>
                <div class="data_cell">${comments}</div>
                <div class="data_cell"><img src="./icons/delete.png" class="delete_button" onclick="form.DeleteTask(this)"></div>
            `;

            table.appendChild(newRow);

            tasks.push({ typeImageSrc, date, name, comments });
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
    }

    static DeleteTask(button) {
        const row = button.closest('.data_row');
        const cells = row.querySelectorAll('.data_cell');
        const date = cells[1].innerText;
        const name = cells[2].innerText;
        const comments = cells[3].innerText;

        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        const filteredTasks = tasks.filter(task => !(task.date === date && task.name === name && task.comments === comments));

        localStorage.setItem('tasks', JSON.stringify(filteredTasks));
        row.remove();
    }

    static LoadDataFromStorage() {
        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        tasks.forEach(task => {
            this.AddDataToTable(task.typeImageSrc, task.date, task.name, task.comments);
        });
    }
}

module.exports = form;
form.LoadDataFromStorage();

我还有一个 main.js，我尝试在其中配置设置：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            contextIsolation: false,
            enableRemoteModule: true,
            nodeIntegration: true
        }
    });

    mainWindow.loadFile('index.html');

    mainWindow.webContents.on('did-finish-load', () => {
        // No need to add an event listener here since it's done in the HTML
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

我知道我可以使用电子存储模块，但我不知道该怎么办。

谢谢你

Answer 1

既然您使用的是 Electron 那么您应该有权访问 node.js，这反过来又使您可以完全访问用户的硬盘！

那么您到底在做什么，在 本地存储上浪费时间？

把它留给网站吧！您是一个桌面网络应用程序还记得吗？ :)

因此，只需在程序目录中创建一个包含所有任务的配置文件（txt），您应该能够在第二天和下一天找到该文件......每次打开和处理。

这是 Node.js 中基本磁盘访问的快速指南：

var fs=require('fs'); // declare the relevant node.js library


fs.writeFileSync(Path,S,'utf8'); // create a new file and write string "S" to it


let S=fs.readFileSync(Path,'utf8');  // Read a file's contents and assign to variable "S".


fs.unlinkSync(Path); // Delete a file


if(fs.existsSync(Path)){}  // Does a file exist?

注意： 每个错误检查可以通过 try{} catch(e){}

完成

在这里进一步研究...

https://nodejs.org/docs/latest/api/fs.html

提示： 坚持使用同步版本的函数。