如何用JS在浏览器本地存储图片/视频并支持定时读取？

一、IndexedDB + 定时器/Service Worker 方案 #

IndexedDB是浏览器原生的大容量结构化存储方案，支持存储Blob类型（图片、视频均可直接转存），无LocalStorage的大小限制（单域名一般支持几十GB，取决于浏览器配置），兼容性覆盖绝大多数现代浏览器，是当前最稳妥的大文件本地存储方案。

核心实现步骤 #

1. 存储文件与调度信息
   直接将用户上传的File对象（File是Blob的子类）存入IndexedDB，同时保存调度时间：

   // 打开或创建数据库
   const dbOpenRequest = indexedDB.open('PostSchedulerDB', 1);
   
   dbOpenRequest.onupgradeneeded = (e) => {
     const db = e.target.result;
     // 创建存储对象，用于存放待发布文件和调度数据
     db.createObjectStore('scheduledTasks', { keyPath: 'taskId' });
   };
   
   dbOpenRequest.onsuccess = (e) => {
     const db = e.target.result;
     // 写入待发布任务
     const tx = db.transaction('scheduledTasks', 'readwrite');
     tx.objectStore('scheduledTasks').add({
       taskId: `task-${Date.now()}`,
       mediaBlob: userUploadFile, // 传入用户上传的File对象
       scheduleTime: new Date('2024-06-01T14:30:00').getTime(),
       postContent: '待发布的帖子正文'
     });
     tx.commit();
   };
   

2. 定时触发读取

   • 前台定时：计算当前时间与调度时间的差值，用setTimeout到期后读取文件并执行发布逻辑：

     const db = indexedDB.open('PostSchedulerDB').result;
     const tx = db.transaction('scheduledTasks', 'readonly');
     const task = await tx.objectStore('scheduledTasks').get(targetTaskId);
     
     const delay = task.scheduleTime - Date.now();
     if (delay > 0) {
       setTimeout(() => {
         // 转成File对象用于发布
         const mediaFile = new File([task.mediaBlob], 'post-media', { type: task.mediaBlob.type });
         // 调用你的发布接口
         publishPost(mediaFile, task.postContent);
       }, delay);
     }
     

   • 后台定时：如果需要浏览器关闭后仍能触发，可结合Service Worker的后台定时能力（如Chrome的chrome.alarms API），定期检查IndexedDB中的待发布任务，到期后触发处理（需HTTPS环境）。

二、File System Access API 持久化优化方案 #

你之前尝试该API可能未申请持久化权限，导致刷新或重启浏览器后文件丢失。正确流程需请求持久化权限并保存文件句柄：

核心实现步骤 #

1. 持久化存储文件

   // 让用户选择文件保存位置
   const fileHandle = await window.showSaveFilePicker({
     suggestedName: `${Date.now()}-post-media.jpg`,
     types: [{ accept: { 'image/*': ['.jpg', '.png'], 'video/*': ['.mp4'] } }]
   });
   // 写入文件
   const writable = await fileHandle.createWritable();
   await writable.write(userUploadFile);
   await writable.close();
   // 请求持久化权限，确保浏览器重启后仍可访问
   await fileHandle.requestPermission({ mode: 'readwrite' });
   // 将文件句柄标识存入IndexedDB（句柄无法直接存在LocalStorage）
   const db = indexedDB.open('PostSchedulerDB').result;
   const tx = db.transaction('fileHandles', 'readwrite');
   tx.objectStore('fileHandles').add({
     taskId: `task-${Date.now()}`,
     handleName: fileHandle.name,
     scheduleTime: new Date('2024-06-01T14:30:00').getTime()
   });
   tx.commit();
   

2. 定时读取文件
   下次打开应用时，从IndexedDB取出句柄信息，恢复文件访问后读取：

   const db = indexedDB.open('PostSchedulerDB').result;
   const tx = db.transaction('fileHandles', 'readonly');
   const task = await tx.objectStore('fileHandles').get(targetTaskId);
   // 恢复文件句柄
   const handle = await window.showOpenFilePicker({
     startIn: 'downloads',
     types: [{ accept: { 'image/*': ['.jpg', '.png'], 'video/*': ['.mp4'] } }]
   });
   // 读取文件
   const mediaFile = await handle[0].getFile();
   // 触发定时发布（同前台定时逻辑）
   const delay = task.scheduleTime - Date.now();
   setTimeout(() => publishPost(mediaFile, task.postContent), delay);
   

方案对比与注意事项 #

• IndexedDB：兼容性最好，无需用户手动操作文件路径，适合MVP快速落地；缺点是文件不以系统可见的形式存储，用户无法直接在本地找到。
• File System Access API：文件以原生系统文件存在，用户可直接查看；但需要用户授权，兼容性仅覆盖Chromium内核浏览器（Chrome、Edge等）。
• 后台限制：浏览器对后台脚本执行有严格管控，Service Worker后台定时仅在部分浏览器支持，且必须在HTTPS环境下运行。MVP阶段优先实现前台定时，后续再迭代后台触发能力。

内容的提问来源于stack exchange，提问作者kaan.py