electron 网页TodoList应用打包win桌面软件数据持久化

参考:
electron 网页TodoList工具打包成win桌面应用exe
https://blog.csdn.net/weixin_42357472/article/details/140648621

electron直接打包exe应用,打开网页上面添加的task在重启后为空,历史没有被保存,需要持久化工具保存之前的操作记录

这里测试用electron-store或electron-conf两个持久化工具运行都ESM报错:
https://zhuanlan.zhihu.com/p/706281785
在这里插入图片描述

解决方法:
直接使用 Node.js 的 fs 模块直接读写 JSON 文件。这样可以避免 ES modules 的问题。
1)electron配置文件
main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const fs = require('fs')const STORAGE_PATH = path.join(app.getPath('userData'), 'todos.json')function saveTodos(todos) {fs.writeFileSync(STORAGE_PATH, JSON.stringify(todos))
}function loadTodos() {try {return JSON.parse(fs.readFileSync(STORAGE_PATH, 'utf8'))} catch (error) {return []}
}function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false}})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})// 修改这些 IPC 处理器
ipcMain.on('save-todos', (event, todos) => {saveTodos(todos)
})ipcMain.handle('load-todos', () => {return loadTodos()
})

package.json

{"name": "todolist-app","version": "1.0.0","main": "main.js","build": {"appId": "com.yourcompany.todolist","mac": {"category": "public.app-category.productivity"},"win": {"icon": "icons/icon.png","target": ["nsis"]},"linux": {"target": ["AppImage","deb"]}},"scripts": {"start": "electron .","build": "electron-builder  --win"},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"electron": "^31.2.1","electron-builder": "^24.13.3"},"dependencies": {}
}

2)网页应用
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TodoList</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>TodoList</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="Enter a new task" required><button type="submit" id="add-button">Add</button></form><ul id="todo-list"></ul><script src="script.js"></script>
</body>
</html>

styles.css

body {font-family: Arial, sans-serif;max-width: 500px;margin: 0 auto;padding: 20px;
}
h1 {text-align: center;
}
#todo-form {display: flex;margin-bottom: 20px;
}
#todo-input {flex-grow: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px 0 0 4px;
}
#add-button {padding: 10px 20px;font-size: 16px;background-color: #4CAF50;color: white;border: none;border-radius: 0 4px 4px 0;cursor: pointer;
}
#todo-list {list-style-type: none;padding: 0;
}
.todo-item {display: flex;align-items: center;padding: 10px;background-color: #f9f9f9;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 4px;
}
.todo-item.completed {text-decoration: line-through;opacity: 0.6;
}
.todo-item input[type="checkbox"] {margin-right: 10px;
}
.delete-button {margin-left: auto;background-color: #f44336;color: white;border: none;padding: 5px 10px;border-radius: 4px;cursor: pointer;
}

script.js

const { ipcRenderer } = require('electron')const todoForm = document.getElementById('todo-form')
const todoInput = document.getElementById('todo-input')
const todoList = document.getElementById('todo-list')async function loadTodos() {const todos = await ipcRenderer.invoke('load-todos')todos.forEach(todo => {addTodoToDOM(todo.text, todo.completed)})
}function saveTodos() {const todos = Array.from(todoList.children).map(li => ({text: li.querySelector('span').textContent,completed: li.classList.contains('completed')}))ipcRenderer.send('save-todos', todos)
}function addTodoToDOM(text, completed = false) {const li = document.createElement('li')li.className = 'todo-item' + (completed ? ' completed' : '')li.innerHTML = `<input type="checkbox" ${completed ? 'checked' : ''}><span>${text}</span><button class="delete-button">Delete</button>`li.querySelector('input[type="checkbox"]').addEventListener('change', function() {li.classList.toggle('completed')if (li.classList.contains('completed')) {todoList.appendChild(li)} else {todoList.insertBefore(li, todoList.firstChild)}saveTodos()})li.querySelector('.delete-button').addEventListener('click', function() {li.remove()saveTodos()})if (completed) {todoList.appendChild(li)} else {todoList.insertBefore(li, todoList.firstChild)}
}todoForm.addEventListener('submit', function(e) {e.preventDefault()if (todoInput.value.trim() === '') returnaddTodoToDOM(todoInput.value)saveTodos()todoInput.value = ''
})loadTodos()

打包:

npm run build

在这里插入图片描述
完成在dist下生产安装文件,及win-unpacked 无需安装的解压文件
在这里插入图片描述
在这里插入图片描述
点击exe运行即可
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/382984.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Unity国产化信创平台】麒麟银河V10系统虚拟机创建

目录 一、麒麟V10系统镜像下载 二、虚拟机创建流程 三、麒麟银河系统安装流程 一、麒麟V10系统镜像下载 https://www.kylinos.cn/# 官方访问还是会有问题&#xff0c;如果有需要麒麟银河Kylin系统V10的镜像文件&#xff0c;可以留下邮箱或者私信博主获取。 二、虚拟机创…

【Gin】架构的精妙编织:Gin框架中组合模式的革新实践与技术深度解析(上)

【Gin】架构的精妙编织&#xff1a;Gin框架中组合模式的革新实践与技术深度解析(上) 大家好 我是寸铁&#x1f44a; 【Gin】架构的精妙编织&#xff1a;Gin框架中组合模式的革新实践与技术深度解析(上)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 本次文章分为上下两部分…

MySQL练手 --- 1251. 平均售价

题目链接&#xff1a;1251. 平均售价 思路&#xff1a; 由题意可知&#xff0c;Prices表和UnitsSold表&#xff0c;表的连接关系为一对一&#xff0c;连接字段&#xff08;匹配字段&#xff09;为product_id 要求&#xff1a;查找每种产品的平均售价。而Prices表含有价格还有…

【区块链+绿色低碳】双碳数字化管控平台 | FISCO BCOS应用案例

地方政府、园区及企业实现“双碳”目标过程中存在一些挑战与难点&#xff1a; 1. 管理者难以掌握完整、准确、全面的碳排放数据进行科学决策&#xff1a;由于碳排放核算需要对数据的来源、核算方法 的规范性和采集方法的科学性有严格要求&#xff0c;当前面临碳排放数据数据采…

视频翻译保留原音色pyvideotrans+clone-voice

剪映的视频翻译时长限制5分钟以内&#xff0c;需要积分2700首次有减免大概21.6元&#xff08;1秒9积分/1元100积分&#xff09; • 视频翻译配音工具pyvideotrans 将视频从一种语言翻译为另一种语言&#xff0c;并添加配音 打包链接&#xff1a;夸克网盘分享 升级补丁&#…

Python从0到100(四十六):实现管理员登录及测试功能

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

【BUG】已解决:You are using pip version 10.0.1, however version 21.3.1 is available.

You are using pip version 10.0.1, however version 21.3.1 is available. 目录 You are using pip version 10.0.1, however version 21.3.1 is available. 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#…

QT--线程

一、线程QThread QThread 类提供不依赖平台的管理线程的方法&#xff0c;如果要设计多线程程序&#xff0c;一般是从 QThread继承定义一个线程类&#xff0c;在自定义线程类里进行任务处理。qt拥有一个GUI线程,该线程阻塞式监控窗体,来自任何用户的操作都会被gui捕获到,并处理…

BGP选路之AS-PATH

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较&#xff0c;以确定去往该目标网络的最优BGP路由。首先要比较的属性是 Preferred Value&#xff0c;然后是Local Preference&#xff0c;再次是路由生成方式&a…

BGP选路之Next Hop

原理概述 当一台BGP路由器中存在多条去往同一目标网络的BGP路由时&#xff0c;BGP协议会对这些BGP路由的属性进行比较,以确定出去往该目标网络的最优BGP路由,然后将该最优BGP路由与去往同一目标网络的其他协议路由进行比较&#xff0c;从而决定是否将该最优BGP路由放进P路由表中…

【在Linux世界中追寻伟大的One Piece】Linux进程概念

目录 1 -> 冯诺依曼体系结构 2 -> 操作系统(operator System) 2.1 -> 概念 2.2 -> 系统调用和库函数 3 -> 进程 3.1 -> 概念 3.2 -> 进程-PCB 3.3 -> 进程状态 3.3.1 -> Z(Zombie)-僵尸进程 3.3.2 -> 孤儿进程 3.4 -> 进程优先级 …

2024-07-24 buildroot c语言应用获取 kernel kobject_uevent_env 发送的消息,侦测USB口变化。

一、kobject_uevent_env 是 Linux 内核中的一个函数&#xff0c;用于发送内核事件到用户空间。它主要用于生成和发送与内核对象&#xff08;kobject&#xff09;相关的事件通知&#xff0c;这些事件通常用于通知用户空间程序&#xff08;如 udev&#xff09;有关硬件的变化或其…

git的一些使用技巧(git fetch 和 git pull的区别,git merge 和 git rebase的区别)

最近闲来无聊&#xff0c;虽然会使用git操作&#xff0c;但是 git fetch 和 git pull 的区别&#xff0c;git merge 和 git rebase的区别只是一知半解&#xff0c;稍微研究一下&#xff1b; git fetch 和 git pull 的区别 git fetch git fetch 是将远程仓库中的改动拉到本地…

解决vscode+UE5中vscode无法识别头文件,无法函数无法跳转,也无法自动补全的问题。

一、概述 接上一条博客&#xff0c;虽然解决了报错的问题&#xff0c;但是实际上的问题却没有解决&#xff0c;无论我怎么点击&#xff0c;其都无法完成跳转&#xff0c;也无法完成自动补全的问题。 在网络上搜索了很多资料后&#xff0c;发现是在使用vscode时候UE5在vscode中的…

百度秋招提前批C++

1.C++内存模型 堆栈全常代 (1)堆 heap : 由malloc分配的内存块,其释放编译器不去管,由我们程序自己控制(一个malloc对应一个free)。涉及的问题:“缓冲区溢出”、“内存泄露”(new分配的在自由存储区 经常由堆实现) (2)栈 stack : 是那些编译器在需要时分配,在…

手动搭建微型计算机(涉及:CPU、内存、寄存器等)

目录 微型计算机基础元件及作用CPU地址总线数据总线 内存地址总线数据总线内存大小的计算 寄存器先将Z80CPU与TC5517内存相连参考文章 微型计算机基础元件及作用 CPU、内存、I/O CPU 包含地址总线引脚和数据总线引脚。 以Z80CPU为例&#xff1a; 地址总线 地址总线引脚…

【React】条件渲染:深入探讨高效开发技巧与最佳实践

文章目录 一、什么是条件渲染&#xff1f;二、条件渲染的实现方式三、条件渲染的最佳实践四、复杂条件渲染的实现 在现代前端开发中&#xff0c;React 已成为开发者构建用户界面的首选框架之一。React 的强大之处在于其组件化和状态管理能力&#xff0c;而条件渲染则是 React 开…

IGV.js | 载入自己下载的gtf文件

1.安装 htslib-1.20 https://www.htslib.org/doc/tabix.html J3$ cd ~/Downloads/ $ wget https://github.com/samtools/htslib/releases/download/1.20/htslib-1.20.tar.bz2 $ tar jxvf htslib-1.20.tar.bz2编译安装&#xff1a; $ cd htslib-1.20/ $ ./configure --prefix/…

java面向对象进阶进阶篇--《抽象类和抽象方法》

个人主页VON 所属专栏java从入门到起飞 目录 个人主页​编辑我的主页​编辑 一、简介 抽象方法&#xff1a; 抽象类&#xff1a; 概述&#xff1a; 二、抽象类 特点和用途 示例&#xff1a; Animal类 Dog类 Flog类 Sheep类 Text类 结果展示&#xff1a; 三、抽象方…

SQL

SQL全称 Structured Query Language&#xff0c;结构化查询语言。操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库统一标准 。 SQL通用语法 SQL语句可以单行或多行书写&#xff0c;以分号结尾。SQL语句可以使用空格/缩进来增强语句的可读性。MySQL数据库的…