如何通过浏览器端存储实现网站关联本地PDF的加载与展示

完全不需要安装Chrome扩展、不需要加自定义启动参数、也不需要引入重型第三方依赖，用浏览器原生标准能力就能实现，整套原理验证原型的代码量不超过100行：

• 先做文件关联绑定：在控制台注入一个隐藏的文件选择控件，设置支持选择单个PDF或整个存放PDF的本地文件夹，拿到文件访问句柄后，把「人员唯一标识（比如系统内的人员ID、工号+姓名的唯一组合）」和对应PDF的文件句柄，存在浏览器原生的IndexedDB里。这里不用引入任何第三方数据库封装库，因为你只需要存最简单的键值映射关系，原生IndexedDB写个极简的读写工具函数就行，总逻辑代码不到20行，完全不存在冗余开销。

注意：不需要把整个PDF文件转码存到浏览器存储里，只存文件访问句柄即可，实际读取内容的时候直接从本地磁盘拉取，完全不占用浏览器的存储配额，哪怕单文件几十MB也不会有容量限制。

• 再处理持久化访问权限：第一次选中文件/文件夹后，调用原生API请求持久化读写权限，后续再打开系统页面时，直接从IndexedDB读取之前存好的文件句柄，校验权限状态，只要用户没手动收回权限，就不需要重复选择文件，刷新页面、关闭浏览器重开都能正常访问，整个流程是浏览器官方支持的标准能力，不会触发安全拦截。
• 最后实现PDF加载展示：打开对应人员的详情页时，先查IndexedDB里有没有绑定的PDF句柄，有的话直接调用getFile方法拿到二进制File对象，用URL.createObjectURL()生成同源的临时Blob地址，直接把这个地址赋值给iframe的src属性就能触发Chrome原生的PDF预览，连第三方PDF渲染库都不用引入；如果需要做更定制化的预览（比如加标注、跳转到指定页），再引入pdfjs库即可。

• 第三方本地存储库方案走不通：Baked-Goods这类长期停更的库本质是对localStorage、已废弃的WebSQL的封装，localStorage本身只能存字符串、单站点配额普遍只有5MB，根本存不了PDF二进制内容；FileSaver.js仅实现了触发浏览器下载的能力，没有读取本地已存文件的权限，自然没法做回读加载。你之前觉得引入数据库实现冗余，是误以为要把文件内容存进浏览器端数据库，实际上只存映射关系和文件句柄的话，原生能力完全够用，没有额外开销。
• DevTools工作区加载本地文件失效：工作区是DevTools的调试专属功能，和页面实际运行的JS上下文是隔离的，受浏览器安全沙箱限制，页面JS没有权限直接读取工作区映射的本地磁盘路径，这个能力本来就不是给页面运行时调用的。
• a标签填本地路径失效：这是Chrome默认的安全策略，禁止任意网页直接通过file://协议路径访问用户本地磁盘文件，防止恶意站点窃取用户本地数据，这个限制没有前端层面的绕过方式。

• 所有逻辑都可以直接在Chrome开发者控制台粘贴运行，不需要修改老旧系统的任何后端代码，也不需要部署额外的服务。
• 可以直接在原有系统的人员详情页插入一个悬浮的「绑定PDF」/「查看PDF」按钮，绑定逻辑关联当前页面的人员ID即可，不需要做额外的路由适配。
• 生成的Blob地址用完之后记得调用URL.revokeObjectURL()释放，避免不必要的内存占用。

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