Skip to content

阅读位置记忆

背景

用户每次打开电子书都从第一页开始,无法继续上次阅读进度。

实现方式

使用浏览器 localStorage 存储每本书的 CFI(Canonical Fragment Identifier)位置:

  • 每本书分配唯一 BOOK_ID,生成独立 storage key:epub-position-{book-id}
  • 通过 epub.js 的 rendition.on('relocated', ...) 事件,每次翻页自动保存当前位置
  • 页面加载时检查 localStorage,若有保存位置则跳转,并显示「已恢复上次位置」提示 3 秒

storage key 分配

书籍BOOK_IDStorage Key
小狗钱钱money-dogepub-position-money-dog
富爸爸穷爸爸rich-dadepub-position-rich-dad

关联文件

  • public/books/reader-money-dog.html
  • public/books/reader-rich-dad.html

金融知识学习笔记