浏览器剪辑
刷新之后素材就丢了，是怎么回事
网页剪辑工具最让人恼火的一件事：忙活半天，刷新一下页面，时间线还在，素材全变成灰色的“文件丢失”。这不是 bug 那么简单，背后是浏览器安全模型的一条硬规则。理解它之后，你会知道哪些操作安全、哪些操作一定会丢。
一、浏览器为什么留不住你的文件
先说结论：网页无法记住你电脑上某个文件的位置，这是设计如此，不是技术做不到。
当你在网页上选择一个视频文件时，浏览器给页面的不是路径，而是一个临时的文件句柄。这个句柄在当前这次页面加载期间有效，页面一刷新就作废。网页永远不知道这个文件在你的 D 盘还是桌面，也没有办法在下次打开时自己去把它读回来。
这条规则的存在是有道理的。如果网页能记住并随时读取你本地的任意文件，那么任何一个你访问过的网站都可以在你不知情的时候翻你的硬盘。浏览器用“不给路径、句柄即用即弃”换来了这份安全性，代价就是网页剪辑工具没法像桌面软件那样，靠记住路径来恢复素材。
所以“刷新后素材丢失”在网页剪辑里是默认状态。工具要做的不是“别丢”，而是主动把素材存进浏览器自己的存储里——存下来的才留得住，没存的一定丢。
二、刷新之后到底还剩什么
弄清楚哪些东西留下来了、哪些没有，能帮你判断遇到的是哪一类问题。
- 项目结构留得住：有几条轨道、每个片段的位置和时长、字幕文字、转场设置——这些都是很小的文本数据，工具通常会存在浏览器本地存储里，刷新后完好无损。这也是为什么你会看到“时间线还在，只是素材是灰的”。
- 素材文件本体不一定：取决于工具有没有把文件的二进制内容存进浏览器的数据库（IndexedDB）。存了就留得住，没存就只剩一个指向已失效句柄的引用。
- 临时生成的地址一定失效：工具在页面里用来播放素材的那个内存地址，页面一关就没了。这不是丢文件，是丢“怎么访问它”的那条线索。
- 渲染缓存通常不保留：波形图、缩略图这些为了显示而算出来的东西，刷新后一般会重新生成。这不影响数据，只是会卡一下。
按这个清单对照一下你遇到的情况：如果时间线结构完全没了，那是项目存档的问题；如果结构在、素材灰了，那是素材存储的问题。两者的修法完全不同。
三、三种丢失，原因不一样
同样是“素材丢了”，成因至少有三种。
- 工具压根没存。有些轻量工具为了省事，只在内存里持有文件，从设计上就不支持刷新恢复。这类工具的正确用法是一次性做完，中途别刷新、别关标签页。
- 存了，但存储被清掉了。浏览器在磁盘紧张时会主动清理网站数据；你手动清缓存、用无痕模式、或者浏览器设置里禁用了网站数据，都会导致存进去的东西没了。无痕模式尤其要注意——它在窗口关闭时会把一切清空。
- 存了、也在，但工具没认出来。这一类最隐蔽，也是我们真正遇到的那一种。数据完好地躺在数据库里，工具去取的时候却因为校验逻辑写错而判定“这不是我要的文件”，于是当成丢失处理。
区分方法：如果同一个项目里有的素材还在、有的丢了，那多半是第三种——存储没坏，是取的逻辑对某一类素材不适用。如果所有素材全军覆没，先怀疑前两种。
四、处理产物为什么最容易丢
有一个很典型的现象：你自己导入的原始素材刷新后还在，而工具处理生成的文件（比如人声分离出来的人声轨、提取出来的音频、导出的片段）一刷新就没了。
原因在于这两类文件的“身份”来源不同。你导入的文件带着真实的文件名，工具存的时候和取的时候用的是同一个名字，对得上。而处理产物是工具在内存里现造出来的，它有两个名字：一个是显示给你看的名字（比如“人声_主音轨.wav”），一个是它在程序内部被创建时的名字（很可能是一串随机字符，或者干脆是空的）。
如果取回文件时的校验逻辑是“比对名字是否一致”，那么这两个名字对不上，校验就会失败——文件明明在，却被当成不是它。
这里有一条通用教训，不只适用于剪辑工具：不要拿文件名当身份校验。文件名是给人看的，随时可能被改、可能为空、可能在不同环节被赋予不同的值。身份校验应该用你自己生成并全程持有的唯一标识。
五、一个真实的排错案例
我们自己的剪辑工具就踩过上面这个坑，过程值得记下来。
现象：人声分离功能跑完之后，会在素材库里多出两条音轨。刷新页面，原始视频还在，这两条分离出来的音轨全部变灰。
第一步是复现，并且缩小范围。我们试了几种素材：导入的视频——刷新后正常；导入的音频——正常；分离产生的音轨——必丢；导出的片段——也丢。规律很清楚：凡是工具自己生成的都丢，凡是用户导入的都在。
第二步是去看存储里到底有没有东西。打开浏览器的开发者工具，直接查数据库——文件在，大小也对。这就排除了“没存进去”和“被清理了”这两种可能，问题一定在读取环节。
第三步是读取回来的那段逻辑。果然，取出文件后有一段校验：比对文件大小，同时比对文件名。而分离产生的那个文件，内部名和界面上显示的名字不是一个，于是名字校验失败，代码把它当成“不是同一个文件”丢弃了。
修法：改成用工具自己写入时用的那把键作为身份依据——只要是通过这把键取回来的，就是同一个文件，不再比对名字；只有在退化到用旧方式查找时，才保留名字比对作为兜底。改完之后所有类型的素材刷新都能恢复。
整件事最值得记住的不是这行代码，而是排错顺序：先确认数据在不在，再去查读取逻辑。如果一上来就怀疑存储写入有问题，方向就完全错了，可能要多花几个小时。
六、工具应该怎么做才不丢
如果你也在做类似的工具，下面几条是我们最后落下来的做法。
- 所有素材，包括处理产物，都要主动写进 IndexedDB。不要区分“用户导入的”和“程序生成的”，一视同仁。
- 用自己生成的唯一 ID 作为存取键。不要用文件名，也不要用文件路径（你根本拿不到路径）。
- 校验只校验能校验的东西。文件大小可以校验，因为它是文件的客观属性；文件名不能，因为它是一个可变的显示属性。
- 处理产物生成时就立即入库，不要等用户做了什么操作才存。用户随时可能刷新。
- 丢失时给出可行动的提示。不要只显示一个灰块和“文件丢失”。至少告诉用户丢的是哪一个、原始文件名是什么，让他能重新导入并接回原位。
- 提供“重新链接”功能。用户重新选一次同一个文件，就把它接回到原来的片段上。这是桌面剪辑软件的标准做法，网页工具更需要它。
七、使用者可以养成的习惯
在工具改好之前，或者在用别人的工具时，下面几条能显著降低损失。
- 重要的处理产物，生成后立刻下载一份到本地。人声分离、音频提取这类花时间的操作，产物存本地是最保险的。多花十秒，省掉重跑十分钟。
- 不要用无痕模式做剪辑。无痕窗口关闭即清空，等于每次都从零开始。
- 别在浏览器里清理网站数据的时候顺手清掉它。清缓存这个动作在很多浏览器里会连带清掉网站存储。
- 长时间的项目，中途导出一次工程文件。如果工具支持导出项目 JSON，导出一份放着，最坏情况下结构不用重搭。
- 素材文件不要在剪辑期间改名或移动。即使工具做了存储，某些恢复路径仍然可能依赖你重新选择同一个文件。
说到底，网页剪辑的便利来自“打开就能用”，代价就是它站在一个比桌面软件更受限的地基上。理解这个地基的形状，你就知道该在哪些地方多存一手。
相关阅读：剪辑接缝为什么会闪一帧。