增加自动存档功能
广告
{{v.name}}
📋 原始需求(task.md):

增加自动存档功能,存档沿用之前的json格式,每5秒自动保存json到localStorage,可以命名为"YuHongboPinDou"。在点击读档按钮时,在输入框的上方增加读取自动存档按钮,用户点击后尝试从localStorage中读取存档数据,如果存在则提示用户是否覆盖当前未保存的进度,如果用户选择覆盖,则读取自动存档,如果用户选择不覆盖,或localStorage中没有存档数据,则弹出提示“自动存档不存在”并关闭对话框。 在自动存档时,如果没有圆点则不覆盖之前的存档,这是因为用户在刚进入页面时没有放置任何圆点,此时如果覆盖之前的存档,会导致之前的进度丢失。 在读档时,用户在点击确认存档按钮时才弹出是否覆盖当前进度的提示,而不是在点击读取自动存档按钮时就弹出提示。

实现方案
  • 每 5 秒将当前进度以相同 JSON 格式写入 localStorage,键名 YuHongboPinDou
  • 读档对话框输入框上方新增「🔄 读取自动存档」按钮
  • 无圆点时不执行自动保存,避免刚进入页面时覆盖之前进度

交互流程

「读取自动存档」仅将 JSON 填入输入框供预览(无存档时提示「自动存档不存在」并关闭对话框);只有点击「确认读档」且当前存在未保存进度时,才弹出「是否覆盖当前未保存的进度?」确认框,取消则不读档,确认后清空并载入。

友链