个人主页ujainu文章目录引言一、整体通信流程概览二、渲染进程详解用户交互与消息发送2.1 输入与按钮绑定2.2 保存逻辑saveNote()2.3 接收保存结果ipcRenderer.on(save-result)三、主进程详解安全写入本地文件3.1 监听保存请求ipcMain.on(save-note)3.2 获取标准文档目录app.getPath(documents)3.3 同步写入文件fs.writeFileSync3.4 错误处理与结果回传四、关键安全与权限考量✅ 安全加固建议生产环境必做五、HarmonyOS PC 专属适配要点六、功能对比不同文件保存策略七、扩展建议完整代码八、总结引言在桌面应用开发中“保存用户数据到本地”是最基础也最关键的交互之一。Electron 凭借其融合 Web 技术与 Node.js 能力的独特架构使得这一操作既直观又强大。本文将深入剖析一个典型场景用户在页面输入框中编辑内容点击“保存”按钮后内容被写入系统“文档”目录下的notes.txt文件。我们将使用ipcRenderer.send()触发保存请求主进程通过fs.writeFileSync同步写入文件并通过 IPC 回传结果状态。该方案已在HarmonyOS PC 的 Linux 兼容层成功运行特别适合鸿蒙生态下的轻量级笔记、配置或日志类工具开发。一、整体通信流程概览整个功能依赖渲染进程 → 主进程 → 文件系统 → 渲染进程的闭环文件系统 (fs)主进程 (Main)渲染进程 (UI)文件系统 (fs)主进程 (Main)渲染进程 (UI)ipcRenderer.send(save-note, {content})fs.writeFileSync(path, content)写入成功/失败event.reply(save-result, {success, message, filePath})显示状态提示 文件路径✅设计原则渲染进程不直接访问文件系统安全隔离所有 I/O 操作由主进程代理执行用户反馈实时、明确、带路径信息二、渲染进程详解用户交互与消息发送2.1 输入与按钮绑定textareaidnoteInputplaceholder在这里输入笔记内容.../textareabuttonclassaction-btn saveonclicksaveNote() 保存到本地/button使用原生textarea确保多行文本支持。user-select: text在 CSS 中显式启用文本选择因全局禁用了user-select: none。2.2 保存逻辑saveNote()functionsaveNote(){constnoteContentdocument.getElementById(noteInput).value;if(!noteContent.trim()){showStatus(❌ 请输入内容后再保存,error);return;}ipcRenderer.send(save-note,{content:noteContent,filename:notes.txt});showStatus(⏳ 正在保存...,success);}关键点解析步骤说明空值校验trim()防止纯空格提交提升用户体验消息结构包含content和filename便于主进程灵活处理即时反馈发送后立即显示“正在保存”避免用户重复点击为什么不用dialog.showSaveDialog本例目标是固定保存到“文档”目录无需用户选择路径简化流程。若需自定义路径则应引入dialog模块后文扩展建议。2.3 接收保存结果ipcRenderer.on(save-result)ipcRenderer.on(save-result,(event,result){if(result.success){showStatus(✅ result.message,success);document.getElementById(filePath).textContent保存位置result.filePath;}else{showStatus(❌ result.message,error);}});结构化响应{ success, message, filePath }便于前端统一处理。路径展示让用户知道文件具体存哪里增强可信度尤其在 HarmonyOS 等新系统中。三、主进程详解安全写入本地文件3.1 监听保存请求ipcMain.on(save-note)ipcMain.on(save-note,(event,data){// 处理逻辑...});data即渲染进程传来的{ content, filename }对象。此处未做额外验证因来源可信但生产环境可增加类型检查。3.2 获取标准文档目录app.getPath(documents)constdocumentsPathapp.getPath(documents);constfilePathpath.join(documentsPath,data.filename);为什么用app.getPath(documents)方法路径示例Linux/HarmonyOS PC优势app.getPath(documents)/home/user/Documents/跨平台、符合用户习惯、有写权限__dirname应用安装目录可能无写权限且非用户可见区域硬编码路径/home/user/notes.txt不可移植多用户环境失效✅HarmonyOS PC 适配关键在兼容层中app.getPath(documents)会正确映射到用户的“文档”目录确保文件可被其他应用如文件管理器访问。3.3 同步写入文件fs.writeFileSyncfs.writeFileSync(filePath,data.content,utf-8);参数说明filePath完整绝对路径data.content用户输入的字符串utf-8指定编码避免中文乱码HarmonyOS 中文支持必备⚠️同步 vs 异步writeFileSync是阻塞式简单可靠适合小文件1MB若处理大文件或高频写入应改用fs.writeFileasync/await避免卡死主进程3.4 错误处理与结果回传try{fs.writeFileSync(...);event.reply(save-result,{success:true,...});}catch(error){event.reply(save-result,{success:false,message:error.message});}必须包裹try/catch文件写入可能因权限、磁盘满、路径非法等失败。错误信息透传将error.message返回前端便于调试如“EACCES: permission denied”。四、关键安全与权限考量尽管当前配置启用了nodeIntegration但文件写入操作仍严格限制在主进程这是安全设计的核心风险本方案如何规避渲染进程直接写任意文件❌ 不可能fs仅在主进程可用路径遍历攻击如../../etc/passwd⚠️ 当前未过滤filename存在风险覆盖系统关键文件⚠️ 若filename被篡改可能写入危险位置✅ 安全加固建议生产环境必做白名单文件名constallowedFilenames[notes.txt,log.txt];if(!allowedFilenames.includes(data.filename)){thrownewError(非法文件名);}强制限定目录constsafePathpath.join(documentsPath,path.basename(data.filename));// path.basename() 剥离路径只保留文件名迁移到preload模式彻底禁用nodeIntegration通过预加载脚本暴露saveNote方法。五、HarmonyOS PC 专属适配要点问题解决方案中文乱码显式指定utf-8编码文档目录不可写使用app.getPath(documents)而非硬编码硬件加速导致透明窗口异常app.disableHardwareAcceleration()必须调用字体渲染模糊CSS 中指定PingFang SC,Microsoft YaHei等高 DPI 字体六、功能对比不同文件保存策略方案适用场景用户控制安全性代码复杂度固定路径写入本文日志、自动备份、配置无高主进程控制★☆☆dialog.showSaveDialog用户主动保存有选路径/文件名高★★☆渲染进程直写不推荐快速原型有极低XSS 可删系统文件★☆☆结论对于“自动保存到标准位置”的需求本文方案是最简洁、安全、用户友好的选择。七、扩展建议追加模式若需记录多条笔记可改用fs.appendFileSync。自动保存监听textarea的input事件500ms 后触发保存防抖。文件存在提示写入前检查fs.existsSync(filePath)弹窗确认覆盖。多格式支持根据扩展名.txt/.md自动切换内容格式。完整代码const{app,BrowserWindow,ipcMain,dialog}require(electron);constfsrequire(fs);constpathrequire(path);letmainWindow;// 1. 在 Electron 层面禁用硬件加速app.disableHardwareAcceleration();functioncreateWindow(){// 获取屏幕尺寸const{width:screenWidth,height:screenHeight}screen.getPrimaryDisplay().workAreaSize;// 窗口尺寸constwindowWidth650;constwindowHeight550;// 计算居中位置constx(screenWidth-windowWidth)/2;consty(screenHeight-windowHeight)/2;mainWindownewBrowserWindow({width:windowWidth,height:windowHeight,x:x,y:y,frame:false,transparent:true,resizable:false,movable:true,minimizable:true,closable:true,skipTaskbar:false,roundedCorners:true,hasShadow:true,webPreferences:{nodeIntegration:true,contextIsolation:false,},});// 创建 HTML 内容包含文件保存功能consthtmlContent!DOCTYPE html html head meta charsetUTF-8 style * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Arial, sans-serif; overflow: hidden; background: transparent; } .window-container { width: 100%; height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .title-bar { height: 44px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; -webkit-app-region: drag; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .title-text { color: white; font-size: 15px; font-weight: 600; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); font-family: SF Pro Display, Segoe UI, PingFang SC, sans-serif; } .window-controls { display: flex; gap: 10px; -webkit-app-region: no-drag; } .control-btn { width: 14px; height: 14px; border-radius: 50%; border: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; outline: none; } .control-btn::before { content: ; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent); } .control-btn:hover { transform: scale(1.1); } .control-btn:active { transform: scale(0.95); } .close-btn { background: linear-gradient(135deg, #ff6b6b, #ee5a5a); box-shadow: 0 2px 4px rgba(255, 107, 107, 0.4); } .close-btn:hover { background: linear-gradient(135deg, #ff5252, #e04545); box-shadow: 0 3px 8px rgba(255, 107, 107, 0.6); } .minimize-btn { background: linear-gradient(135deg, #ffd93d, #ffcd38); box-shadow: 0 2px 4px rgba(255, 217, 61, 0.4); } .minimize-btn:hover { background: linear-gradient(135deg, #ffc929, #ffbd2e); box-shadow: 0 3px 8px rgba(255, 217, 61, 0.6); } .maximize-btn { background: linear-gradient(135deg, #6bcf7f, #4fd66a); box-shadow: 0 2px 4px rgba(107, 207, 127, 0.4); } .maximize-btn:hover { background: linear-gradient(135deg, #5dd66f, #45c75f); box-shadow: 0 3px 8px rgba(107, 207, 127, 0.6); } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; padding: 40px 50px; } h1 { font-size: 36px; font-weight: 700; background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; letter-spacing: 1px; margin-bottom: 35px; font-family: SF Pro Display, PingFang SC, Microsoft YaHei, sans-serif; } .editor-area { width: 100%; max-width: 550px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 12px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.2); } .editor-title { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: rgba(255, 255, 255, 0.95); font-family: SF Pro Text, PingFang SC, sans-serif; display: flex; align-items: center; gap: 10px; } .icon { font-size: 24px; } .textarea-container { margin-bottom: 25px; } textarea { width: 100%; height: 280px; background: rgba(255, 255, 255, 0.95); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 18px; font-size: 16px; font-family: SF Pro Text, PingFang SC, Microsoft YaHei, monospace; resize: none; outline: none; transition: all 0.3s ease; color: #333; user-select: text; line-height: 1.6; } textarea:focus { border-color: rgba(255, 255, 255, 0.8); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); } textarea::placeholder { color: #999; } .button-group { display: flex; gap: 15px; } .action-btn { flex: 1; padding: 18px 25px; background: linear-gradient(135deg, #ffffff, #f0f0f0); border: none; border-radius: 10px; color: #667eea; font-size: 17px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: SF Pro Text, PingFang SC, sans-serif; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; gap: 10px; } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } .action-btn:active { transform: translateY(0); } .action-btn.save { background: linear-gradient(135deg, #6bcf7f, #4fd66a); color: white; } .action-btn.save:hover { background: linear-gradient(135deg, #5dd66f, #45c75f); } .status-message { margin-top: 20px; padding: 15px; border-radius: 8px; font-size: 15px; font-weight: 500; text-align: center; font-family: SF Pro Text, sans-serif; opacity: 0; transition: opacity 0.3s ease; } .status-message.show { opacity: 1; } .status-message.success { background: rgba(107, 207, 127, 0.3); color: #ffffff; border: 1px solid rgba(107, 207, 127, 0.5); } .status-message.error { background: rgba(255, 107, 107, 0.3); color: #ffffff; border: 1px solid rgba(255, 107, 107, 0.5); } .file-path { margin-top: 15px; font-size: 13px; color: rgba(255, 255, 255, 0.7); font-family: SF Pro Text, monospace; text-align: center; word-break: break-all; } /style /head body div classwindow-container div classtitle-bar div classtitle-text笔记保存工具/div div classwindow-controls button classcontrol-btn minimize-btn onclickminimizeWindow() title最小化/button button classcontrol-btn maximize-btn onclickmaximizeWindow() title最大化/button button classcontrol-btn close-btn onclickcloseWindow() title关闭/button /div /div div classcontent h1 保存笔记到本地/h1 div classeditor-area div classeditor-title span classicon/span 输入你的笔记内容 /div div classtextarea-container textarea idnoteInput placeholder在这里输入笔记内容...#10;#10;例如#10;- 今天学习了 Electron#10;- HarmonyOS PC 很有趣#10;- 明天要继续加油/textarea /div div classbutton-group button classaction-btn onclickclearContent() ️ 清空 /button button classaction-btn save onclicksaveNote() 保存到本地 /button /div div classstatus-message idstatusMessage/div div classfile-path idfilePath/div /div /div /div script const { ipcRenderer } require(electron); // 窗口控制函数 function closeWindow() { ipcRenderer.send(close-window); } function minimizeWindow() { ipcRenderer.send(minimize-window); } function maximizeWindow() { ipcRenderer.send(maximize-window); } // 清空内容 function clearContent() { document.getElementById(noteInput).value ; showStatus(已清空, success); } // 显示状态消息 function showStatus(message, type) { const statusEl document.getElementById(statusMessage); statusEl.textContent message; statusEl.className status-message show type; setTimeout(() { statusEl.className status-message; }, 3000); } // 保存笔记 function saveNote() { const noteContent document.getElementById(noteInput).value; if (!noteContent || noteContent.trim() ) { showStatus(❌ 请输入内容后再保存, error); return; } // 发送消息给主进程请求保存文件 ipcRenderer.send(save-note, { content: noteContent, filename: notes.txt }); showStatus(⏳ 正在保存..., success); } // 监听主进程的保存结果 ipcRenderer.on(save-result, (event, result) { if (result.success) { showStatus(✅ result.message, success); document.getElementById(filePath).textContent 保存位置 result.filePath; } else { showStatus(❌ result.message, error); document.getElementById(filePath).textContent ; } }); /script /body /html;mainWindow.loadURL(data:text/html;charsetutf-8,encodeURIComponent(htmlContent));// 主进程 IPC 处理 // 处理保存笔记的请求ipcMain.on(save-note,(event,data){try{// 获取用户的文档目录constdocumentsPathapp.getPath(documents);constfilePathpath.join(documentsPath,data.filename);console.log(准备保存文件到:,filePath);console.log(文件内容:,data.content);// 使用 Node.js 的 fs.writeFileSync 写入文件// 这是同步写入会阻塞直到写入完成fs.writeFileSync(filePath,data.content,utf-8);console.log(文件保存成功:,filePath);// 发送成功消息回渲染进程event.reply(save-result,{success:true,message:笔记已成功保存到文档文件夹,filePath:filePath,filename:data.filename});}catch(error){console.error(保存文件失败:,error);// 发送错误消息回渲染进程event.reply(save-result,{success:false,message:保存失败error.message,filePath:,filename:data.filename});}});// 监听窗口控制事件ipcMain.on(close-window,(){mainWindow.close();});ipcMain.on(minimize-window,(){mainWindow.minimize();});ipcMain.on(maximize-window,(){if(mainWindow.isMaximized()){mainWindow.unmaximize();}else{mainWindow.maximize();}});}// 引入 screen 模块const{screen}require(electron);app.whenReady().then(createWindow);// 处理 macOS 上的所有窗口关闭事件app.on(window-all-closed,(){app.quit();});运行界面八、总结本文通过一个“保存笔记到文档/notes.txt”的完整案例系统讲解了 Electron 中如何安全、可靠地将用户输入持久化到本地文件。核心要点包括IPC 作为唯一通信通道确保渲染进程无法直接访问文件系统app.getPath(documents)提供跨平台标准路径完美适配 HarmonyOS PC同步写入 错误捕获保证操作原子性与反馈完整性前端状态反馈 路径展示极大提升用户体验。此模式可直接复用于配置保存、日志记录、草稿自动备份等场景是 Electron 桌面应用开发的基础范式之一。掌握它你就迈出了构建专业级鸿蒙桌面应用的关键一步。欢迎加入开源鸿蒙PC社区https://harmonypc.csdn.net/