纯JS无后端PDF阅读器如何不借助数据库缓存用户上传文件与阅读进度

首先这个功能和托管主机完全无关，仅通过JavaScript就可以实现，不需要后端服务或数据库支持。

实现核心原理 #

依赖浏览器提供的本地存储能力即可完成数据持久化，无需和服务端交互：

• 小体积PDF（≤5MB）可以直接用localStorage存储文件Base64编码、阅读页码等数据
• 大体积PDF优先使用IndexedDB存储Blob格式的文件内容，该API默认支持数十到数百MB的存储空间，完全满足常规PDF的存储需求

具体实现步骤 #

• 用户上传PDF时，同步将文件转为Blob/ArrayBuffer格式，连同文件名、当前阅读页码等元数据存入本地存储
• 用户翻页操作时，实时更新存储的最新页码值
• 站点初始化阶段，先读取本地存储中是否有留存的PDF数据：如果存在直接跳过首页，加载阅读模式后读取本地存储的文件内容传入pdfjs渲染，同时跳转到存储的对应页码即可

注意事项 #

• 本地存储数据和站点域名绑定，只要域名不变，GitHub Pages部署完全不影响功能使用，用户不主动清理浏览器站点数据的前提下内容可以长期留存
• 浏览器隐身模式下关闭窗口后会自动清除站点所有本地存储数据，属于浏览器安全限制，无法绕过
• 可以使用localForage这类轻量封装库简化IndexedDB操作，降低代码复杂度

内容的提问来源于stack exchange，提问作者bzmind