怎么通过HTML5中LocalStorage实现网页版PDF阅读器的上次阅读页码记忆-H5教程-PHP中文网

可通过 localStorage 在页面刷新或关闭后保存并恢复 PDF 阅读器页码：加载时读取、校验越界、渲染完成后再跳转；翻页即存，键名区分多文档；加 try-catch 兼容隐私模式，页码统一用整数。

怎么通过html5中localstorage实现网页版pdf阅读器的上次阅读页码记忆

可以通过 localStorage 在用户关闭或刷新页面后，自动保存并恢复 PDF 阅读器的当前页码。核心思路是：加载 PDF 时读取上次页码 → 跳转到该页 → 用户翻页时实时更新存储。

监听页面加载与 PDF 渲染完成

使用 PDF.js 渲染时，需等待文档加载完成再尝试恢复页码。不能在 DOM 就绪后立即跳页，否则渲染器尚未初始化。

调用 pdfjsLib.getDocument(url) 获取文档对象
在 promise.then(pdf => { ... }) 内部读取 localStorage.getItem('lastPage')
确保 pdf.numPages >= lastPage，避免越界（例如上次存了 100 页，但新版 PDF 只有 50 页）

翻页时实时更新 localStorage

每次用户点击“下一页”、“上一页”或输入页码跳转后，立刻写入最新页码。不要等到页面卸载才保存，防止意外崩溃丢失记录。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

在页码变更逻辑末尾添加：localStorage.setItem('lastPage', currentPage)
推荐使用字符串键名如 'pdf-reader-last-page-文件名哈希'，避免多个 PDF 互相覆盖（例如：localStorage.setItem('pdf-reader-last-page-' + hash, page)）
可配合 beforeunload 做双重保险，但不依赖它作为主保存时机

处理多 PDF 场景与清理逻辑

如果阅读器支持切换不同 PDF 文件，必须区分存储空间，否则 A 文档的页码会错误影响 B 文档。

生成唯一标识：可用 PDF URL 的 encodeURIComponent 结果，或服务端返回的 documentId
读取时先检查是否存在对应键，不存在则默认第 1 页
提供“清除阅读记录”按钮，执行 localStorage.removeItem(key) 或遍历清除所有带前缀的项

兼容性与边界注意点

localStorage 在隐私模式（如 Safari 无痕、Chrome Incognito）中可能被禁用或限制写入，需加 try-catch。

封装一个安全的存储函数：

function safeSetItem(key, value) {
    try {
      localStorage.setItem(key, value);
    } catch (e) {
      console.warn('localStorage not available:', e);
    }
  }