问题: 本地开发环境下,GitHub Discussions 已发布 10 篇文章,但博客首页仅显示 9 篇。
问题类别: 缓存机制 / 数据同步
影响范围: 首页文章列表(/ 路由,本地 npm run dev 环境)
问题原因: src/api/cache.js 实现的 localStorage 单层缓存对文章列表设置了 5 分钟 TTL。用户在 GitHub Discussions 发布第 10 篇文章后,立即刷新本地首页,此时缓存尚未过期,前端直接返回了缓存中的旧数据(仅包含之前抓取的 9 篇),导致新文章未出现在列表中。
排查思路:
- 区分构建时与运行时数据流,确认
npm run dev属于运行时动态拉取模式,问题应聚焦在src/api/github.js、src/api/cache.js、src/pages/Home.js三个文件; - 基于需求文档第 5 节缓存规范,推断可能是
localStorage缓存未过期导致数据不同步; - 给出四步排查建议:① 清理 localStorage 缓存;② 检查网络请求返回数组长度;③ 检查分页控件是否隐藏了第 10 篇;④ 核对第 10 篇的 Discussion Category 是否为
Blog; - 用户执行第一步后,第 10 篇文章立即显示,验证根因为缓存层问题。
最佳解决方法: 打开浏览器 DevTools → Application → LocalStorage → 删除所有 ck_ 前缀的缓存键 → 刷新页面。新文章随即正常显示。
验证状态: 用户已确认