如何在无后端数据库的浏览器环境中存储上传的音频文件？

核心思路 #

所有方案均基于浏览器本地存储实现，因为无后端支持，需将音轨数据留存于用户本地设备，再通过JSON文件关联应用状态与音轨的引用/数据。

具体方案 #

1. Data URI 嵌入JSON #

• 将上传的音轨文件转换为Base64编码的Data URI，直接写入项目JSON中。
• 优势：无需额外存储介质，JSON文件本身包含所有数据，分享或加载仅需单个文件。
• 劣势：Base64编码会使文件体积增加约30%，大音频文件会导致JSON文件过大，拖慢加载与解析速度。
• 实现要点：使用FileReader.readAsDataURL()将音频文件转为Data URI，保存时将该字符串存入JSON对应字段；加载时直接用此URI创建音频对象。

2. File System Access API #

• 借助浏览器文件系统访问API，让用户选择本地目录保存音轨文件和项目JSON，JSON中仅存储音轨文件的相对路径。
• 优势：音轨以原始格式存储，无体积膨胀，适合大文件；用户可手动管理文件位置。
• 劣势：浏览器兼容性有限（仅Chrome、Edge等Chromium内核浏览器支持较好），需用户授权文件系统访问权限。
• 实现要点：保存时先将音轨文件写入用户指定的本地目录，再把相对路径写入项目JSON；加载时通过路径读取对应本地文件。

3. LocalStorage（仅适用于小音频） #

• 将音频文件转为Base64后存入LocalStorage，JSON中存储对应的键名。
• 优势：API简单易用，上手成本低。
• 劣势：LocalStorage存在大小限制（一般约5MB），仅能处理极小音频片段；同样存在Base64体积膨胀问题。
• 实现要点：通过localStorage.setItem('audio-track-xxx', base64Data)存储数据，JSON中记录trackId: 'audio-track-xxx'，加载时通过键名取出数据。

4. Cache API #

• 将音频文件存入浏览器Cache存储，JSON中存储缓存键或请求标识。
• 优势：可缓存原始二进制文件，无Base64体积损耗；支持类HTTP的缓存策略。
• 劣势：Cache API主要为PWA设计，操作相对复杂；缓存数据可能因浏览器存储空间不足被自动清理。
• 实现要点：用caches.open()打开缓存，通过cache.put()存入音频文件（可自定义请求URL作为键），JSON中记录该键，加载时通过cache.match()取出文件。

补充说明 #

IndexedDB确实是多数场景下的最优解：它支持存储二进制文件，容量限制宽松（远大于LocalStorage），异步操作适配复杂数据结构。若需绕过其限制，可根据具体需求从上述方案中选择。

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