输入：已具备基础功能的个人SOP工作台前端代码。关键操作：向AI Agent发送包含localStorage存储逻辑的Prompt，明确需保存的数据字段及生命周期。产出：支持刷新不丢失数据的本地存储版本。本教程聚焦于利用浏览器原生能力实现非敏感数据的本地持久化，区分刷新与跨域场景，强调同一浏览器环境下的验收标准，不适用于敏感资料或跨设备同步需求。
明确需要持久化的数据结构
在要求ai修改代码前，必须清晰定义哪些数据需要“记住”。对于个人sop工作台，核心数据包括每日、每周、每月和每年的任务列表，以及每个任务的完成状态、分类、分组和标签。此外，首页展示的生日数据也属于需要长期保留的信息。这些字段构成了本地存储的对象模型基础。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
图片中的Prompt示例展示了具体的字段要求。它列出了需要保存的SOP周期类型、状态元数据以及生日数据。这种明确的清单能避免AI遗漏关键字段，确保存储结构的完整性。不要使用模糊的描述如“保存所有用户输入”，而应具体到“SOP完成状态”和“分类标签”。
编写包含存储逻辑的指令
将结构化的需求转化为AI可执行的指令。重点在于指定使用`localStorage` API，并规定数据在页面刷新、关闭后重新打开时不得丢失。指令中应包含对现有功能的保护声明，例如“保留现有页面、视觉和已经完成的SOP周期逻辑，不要重新设计已有功能”，以防止AI重构导致原有交互失效。
现在为个人 SOP 工作台增加数据持久化。 使用浏览器 localStorage 保存用户数据。 需要保存： - 每日、每周、每月、每年的 SOP、完成状态、分类、分组、标签； - 首页的生日数据。 刷新页面、关闭页面后重新打开，数据都不能丢失。
这段提示词直接对应了技术实现的核心约束。它没有涉及复杂的云端同步或账号系统，仅聚焦于单设备、单浏览器的本地存储。这种简化范围有助于AI生成更稳定、更少Bug的代码片段。避免在此阶段引入“自动备份”或“多端同步”等复杂概念，以免混淆实现路径。
验证本地存储的有效性
代码生成后，需在相同浏览器环境下进行验收。首先，录入几条测试SOP数据，记录其分类和完成状态。然后，执行页面刷新操作（F5或Ctrl+R），检查数据是否依然显示且状态未重置。接着，完全关闭浏览器窗口，再次打开该网页，确认数据依然存在。这是验证`localStorage`生效的基本步骤。
注意区分本地存储的局限性。此方案仅在同一个浏览器实例中有效，无法实现手机与电脑之间的数据同步，也无法在不同设备间共享。如果需要跨设备访问，必须另行开发云端同步模块，涉及账号登录和数据隔离机制，这超出了本地存储的能力范围。切勿将本地存储误用为敏感信息的保存手段，因其安全性低于加密数据库或云端服务。
