在树中编码：为 freeCodeCamp 添加自动保存

Source: Dev.to

背景

在我的下一份工作开始日期确定为大约两周后，我终于有了一些空闲时间。我打开 VS Code，倒了一杯咖啡，开始在 GitHub 上寻找 “help wanted” 的 issue。我回到 freeCodeCamp 仓库，挑选了一个吸引我的 issue。

问题

GitHub 上的原始 issue

FreeCodeCamp 并不会自动将代码保存到 localStorage。用户必须手动按 Ctrl + S，但这一要求并未明确告知。因此，很多用户在离开页面时会丢失工作内容。

解决方案建议

添加一个类似 LeetCode 和 GreatFrontend 使用的自动保存功能。实现包括：

• 通过防抖的 onChange、onBlur、组件卸载以及 beforeunload 事件，将数据持久化到 localStorage。
• 每五秒更新一次时间戳，并在导航时干净地重置，避免出现陈旧的 “Saved 20 m ago” 提示。
• 在工具栏（ActionRow）中加入一个 FontAwesome 勾选图标和简短的状态文字作为可视指示。
• 使用共享的工具函数和自定义 Hook，使代码保持 DRY（不要重复自己）。
• 为手动保存提供一个显眼的下载按钮。

实现细节

在 fork 仓库并创建新分支后完成了此工作。得益于直观的文件夹结构和描述性的函数名称，相关组件很快就找到了。

关键技术选择

• 状态管理：主要使用 React 的 Context API，局部状态采用 Zustand。曾在 Claude 的指导下尝试过 Redux。
• 状态变量：lastSavedTime 用于记录自上一次自动保存以来的时间。
• 自动保存行为：在 code-storage-epic.js 中更新逻辑，抑制自动保存时的闪现消息，同时保留手动保存的明确确认。

测试

单元测试

completion-modal.test.tsx 中的单元测试因重构后逻辑被移至工具函数而未更新而失败。修复方式是调整测试，引入新的工具函数。

端到端测试

multifile-cert-projects.spec.ts 中的两个 e2e 测试也出现了失败。使用 Playwright（类似 Cypress）快速定位问题。解决方案是确保自动保存操作保持沉默，不干扰测试预期。

结果

• 耗时：2 天
• 结果：自动保存现在能够静默工作，更新时间戳而不会出现干扰性的闪现消息。手动保存仍会提供明确的确认。

Pull Request 已准备好供审阅。我现在在等待反馈，也许还能去冲个澡。