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.xdnf.cn/news/1487467.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

铠侠最新BiCS8 218L NAND键合技术

随着存储技术的不断演进&#xff0c;Hybrid Bonding&#xff08;混合键合&#xff09;技术正逐渐成为内存和存储应用领域的重要组成部分。TechInsights最近对KIOXIA/WD BiCS8 218L CBA 1 Tb 3D TLC NAND进行了深入分析&#xff0c;揭示了这项技术如何在提高存储密度、降低功耗和…

在Windows下部署jar包,关闭命令提示符可以后台运行

前言 大多数情况下&#xff0c;都是选用Linux作为服务器部署服务&#xff0c;在Linux中通过以下命令运行 nohup java -jar xxxxx-1.0-SNAPSHOT.jar 但是有时由于其他原因&#xff0c;或本地测试&#xff0c;或云服务器使用Windows server等等&#xff0c;需要在Windows上面运…

[嵌入式Linux]-常见编译框架与软件包组成

嵌入式常见编译框架与软件包组成 1.嵌入式开发准备工作 主芯片资料包括&#xff1a; 主芯片资料 主芯片开发参考手册&#xff1b;主芯片数据手册&#xff1b;主芯片规格书&#xff1b; 硬件参考 主芯片硬件设计参考资料&#xff1b;主芯片配套公板硬件工程&#xff1b; 软件…

学术研讨 | 基于区块链的隐私计算与数据可信流通研讨会顺利召开

近日&#xff0c;由国家区块链技术创新中心组织的“基于区块链的隐私计算与数据可信流通研讨会”顺利召开&#xff0c;会议邀请了来自全国高校和科研院所的相关领域专家&#xff0c;围绕基于区块链与隐私计算技术的应用需求、研究现状、发展趋势、重点研究方向与研究进展等内容…

基于 LlamaIndex 构建自己的 RAG 知识库

创建虚拟环境用于运行 运行 InternLM 的基础环境&#xff0c;命名为 llamaindex conda create -n llamaindex python3.10 查看存在的环境 conda env list 激活刚刚创建的环境 conda activate llamaindex 安装基本库pytorch,torchvision ,torchaudio,pytorch-cuda 并指定通道&…

【React】JSX 实现列表渲染

文章目录 一、基础语法1. 使用 map() 方法2. key 属性的使用 二、常见错误和注意事项1. 忘记使用 key 属性2. key 属性的选择 三、列表渲染的高级用法1. 渲染嵌套列表2. 条件渲染列表项3. 动态生成组件 四、最佳实践 在 React 开发中&#xff0c;列表渲染是一个非常常见的需求。…

Mac装虚拟机占内存吗 Mac用虚拟机装Windows流畅吗

如今&#xff0c;越来越多的Mac用户选择在他们的设备上安装虚拟机来运行不同的操作系统。其中&#xff0c;最常见的是使用虚拟机在Mac上运行Windows。然而&#xff0c;许多人担心在Mac上装虚拟机会占用大量内存&#xff0c;影响电脑系统性能。此外&#xff0c;有些用户还关心在…

Nginx Proxy缓存

Proxy缓存 缓存类型 网页缓存 &#xff08;公网&#xff09;CDN数据库缓存 memcache redis网页缓存 nginx-proxy客户端缓存 浏览器缓存 模块 ngx_http_proxy_module 语法 缓存开关 Syntax: proxy_cache zone | off; Default: proxy_cache off; Context: http,…

【JavaEE】Bean的作用域和生命周期

一.Bean的作用域. 1.1 Bean的相关概念. 通过Spring IoC和DI的学习(不清楚的可以看的前面写过的总结,可以快速入门, http://t.csdnimg.cn/K8Xr0),我们知道了Spring是如何帮助我们管理对象的 通过 Controller , Service , Repository , Component , Configuration , Bean 来声明…

开发桌面程序-Electron入门

Electron是什么 来自官网的介绍 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 总…

JL 跳转指令的理解

一般情况下&#xff0c;JU 和 JC 是最常见的跳转指令&#xff1b;但有时会用到JL 指令&#xff0c;JL 说起来更像是一组指令&#xff0c;类似C,C# 语言中的 switch case 语句&#xff0c;但是有个明显的不同&#xff0c;前者的判断条件可以是任意合理数字&#xff0c;后者范围…

C语言 之 理解指针(1)

文章目录 1. 内存和地址2. 指针变量和地址2.1 取地址操作符&#xff08;&&#xff09;2.2 指针变量和解引用操作符&#xff08;*&#xff09;2.2.1 指针变量2.2.2 指针类型的理解2.2.3 解引用操作符(*) 2.3 指针变量的大小 3. 指针变量类型的意义3.1 指针的解引用3.2 指针-…

【科研】# Taylor Francis 论文 LaTeX template模版 及 Word模版

【科研写论文】系列 文章目录 【科研写论文】系列前言一、Word 模板&#xff08;附下载网址&#xff09;&#xff1a;二、LaTeX 版本方法1&#xff1a;直接网页端打开&#xff08;附网址&#xff09;方法2&#xff1a;直接下载到本地电脑上编辑下载地址说明及注意事项 前言 给…

计算机网络基础:4.HTTP与HTTPS

一、回顾设定 想象你在经营一家繁忙的餐厅&#xff0c;顾客们通过点餐系统&#xff08;网卡&#xff09;下单&#xff0c;订单被前台&#xff08;路由器&#xff09;接收并分发到各个厨房区域&#xff08;网络设备&#xff09;。光猫像是食材供应商&#xff0c;通过高效的物流系…

lua 游戏架构 之 游戏 AI (四)ai_autofight_find_target

定义一个名为 ai_autofight_find_target 的类&#xff0c;继承自 ai_base 类。 lua 游戏架构 之 游戏 AI &#xff08;一&#xff09;ai_base-CSDN博客文章浏览阅读237次。定义了一套接口和属性&#xff0c;可以基于这个基础类派生出具有特定行为的AI组件。例如&#xff0c;可…

初识redis:通用命令

今天我们简单介绍一些关于redis的基础命令。 目录 get 和 set 全局命令 keys EXISTS del&#xff08;delete&#xff09; expire TTL Redis的key过期策略是怎么实现的&#xff1f; type get 和 set 连接到云服务器后&#xff0c;通过redis-cli命令进入到redis客户端…

设计模式--创建型

实现 #include <iostream> #include <memory>// 抽象产品类 class Product {public:virtual void Operation() const 0; };// 具体产品 类A class ConcreteProductA : public Product {public:virtual void Operation() const override {std::cout << &quo…

学术研讨 | 区块链治理与应用创新研讨会顺利召开

学术研讨 近日&#xff0c;国家区块链技术创新中心组织&#xff0c;长安链开源社区支持的“区块链治理与应用创新研讨会”顺利召开&#xff0c;会议围绕区块链治理全球发展现状、研究基础、发展趋势以及区块链行业应用创新展开研讨。北京大学陈钟教授做了“区块链治理与应用创…

【STM32嵌入式系统设计与开发拓展】——12_Timer(定时器中断实验)

目录 1、什么是定时器&#xff1f;定时器用于测量时间间隔&#xff0c;而计数器用于计数外部事件的次数 2、定时器的主要功能和用途&#xff1f;3、定时器类型&#xff1f;4、定时器的编写过程5、代码分析定时器计算&#xff1f;计算过程周期&#xff08;arr&#xff09;&#…

Apollo使用(3):分布式docker部署

Apollo 1.7.0版本开始会默认上传Docker镜像到Docker Hub&#xff0c;可以按照如下步骤获取 一、获取镜像 1、Apollo Config Service 获取镜像 docker pull apolloconfig/apollo-configservice:${version} 我事先下载过该镜像&#xff0c;所以跳过该步骤。 2、Apollo Admin S…