被404坑了这么多年，最终用它完美搞定

我在日常上网冲浪的过程中，经常会发现一些有趣或很有价值的网页，然后就收藏起来准备择日再消化。

不过这些意外发现的宝藏常常会在收藏夹里先吃一段时间的灰，当我记起来想再次访问的时候，有些页面可能就已经「404」了，甚是可惜。

剪贴到云端笔记也是一个方法，不过可能会面临着排版样式、以及网页元素丢失、同步速度慢等问题，所以我一般不会只把鸡蛋装进云端笔记这一个篮子里。

而另一个篮子就是很原始，但也很踏实的本地保存方式。对那些质量特别棒、相见恨晚的帖子我一定会在本地存储一份，这样避免被「404」的同时也更方便进一步管理。

但在本地存储的这条路上，我走了不少弯路。

最开始的时候，我是用浏览器自带的保存网页的功能（快捷键一般都是 Ctrl+S），但这样保存会有个很讨厌的问题，就是除了保存的 .html 文件，网页中的前端代码和图片还会额外保存在一个自动生成的文件夹内，好比下图。

保存的少了还好管理，当你存储的网页越来越多，你就知道啥是痛苦了，所以我舍弃了这种保存文件的方式，这种方式其实在 IE 浏览器称霸的时代还很流行。

然后我想到了还可以通过浏览器自带的虚拟打印机保存成 PDF 格式的文档，这样就可以得到一个简简单单的 .pdf 文件，方便管理的同时，也方便我去给这些 PDF 文档做笔记。

方法倒是简单，去浏览器上直接 Ctrl+P 就能唤出打印界面，在目标打印机的选项处选择另存为 PDF。

但这样操作有许多致命的缺点，比如打印下的 PDF 文件经常会自动改变页面的布局，使得保存后的页面布局出现错乱，这对于想要原汁原味把网页保存下来的我来说是肯定不能接受的。

在图片方面这样保存的坑更多，比如面对网页中有长图的场景，保存成 PDF 文件会导致额外的分页或者图片直接挂掉。

再比如一些图片懒加载的网页，还需要你从头到尾浏览一遍，把图片加载出来后才能保存，稍有不顺，你保存下来的网页就会变成这样。

黑哥我极其不推荐用这种方法去保存网页，除了不满意没有任何收获，可能这种虚拟打印机打印的方法只适用于没有图片只有文字的场景。

既然不满意，那就继续折腾呗，，怎么会因为走了两个小弯路就这么轻言放弃，所以我开始从茫茫网络中扒拉各种保存网页的工具。

直到我发现了它，一个能将网页完美保存成单 html 文件的神器扩展，SingleFile。

不得不说当我尝试使用 SingleFile 了之后，发现原来它真的就是那个我一直苦苦寻找的工具。

核心功能就一个，通过简单的操作，把网页中的除了视频以外的所有内容原汁原味，完完整整的存储到本地。

用到现在为止，无论你是怎样的排版，SingleFile 通杀，适应程度高到难以想象。

还以黑哥之前写的那篇 YesPlayMusic 为例，安装好 SingleFile，打开网页，直接点击它的小图标，网页就开始了自动保存。

不用担心延迟加载的图片挂掉，SingleFile 会自动帮你完全加载后再保存。

无论你是动图还是长图，SingleFile 都会完完整整把它们存入你本地，看看之前挂了的那张图。

你甚至还可以这样用，比如遇到黑哥新搞的这个小破站网页访问不流畅的时候，用这个扩展就可以快速下载到本地，比你干等着快多了，简直是立等可取。

我通常还会对网页做一些笔记，强大的 SingleFile 同样也贴心的提供了这方面的支持。

右键点击菜单里的扩展小图标，你会发现有个叫「标注并保存该页面」的选项。

选择并点击，SingleFile 同样会优先延迟加载完所有的图片，然后在当前页面的顶部会出现一个供你做笔记的功能栏。

添加不同颜色的标注，选取文本为不同颜色的高亮，甚至能删除网页中的任意元素，当然对于任意操作 SingleFile 还支持撤销和恢复之前的操作。

当你做好了笔记，再去保存网页，这时保存的网页就是你调教后的网页，等你后续再次查看时帮你轻松理清脉络、回忆起最初的所思所想。

如果你觉得 SingleFile 不过如此，那你还真小瞧它了，在之前右键点击扩展小图标时，SingleFile 还支持网页内容的部分保存，多标签的保存，甚至是自动保存。

不过如果没有特殊情况，我不建议开启那个自动保存的功能，你要是不小心马虎了，本地甚至有被塞满的风险。

至于 SingleFile 到底将 .html 文件保存到了哪里，不妨看看你浏览器默认的下载文件目录，SingleFile 存储的目的地就是那里。

不得不说所有过去烦恼我的问题被 SingleFile 解决的干干净净。

所有保存到本地的网页其实还有一个弊端，那就是没办法再享受浏览器的扩展。

之前黑哥推荐给大家的什么暗黑模式、油猴脚本啥的都不再支持。

为了能像平常那样享受我们辛辛苦苦找来的浏览器扩展，其实还需要一个骚操作，利用第三方工具把本地主机变成服务器。

我这里用的是 Everything，在工具-选项中找到 HTTP 服务器这一栏，勾选启用 HTTP 服务器，然后把绑定接口改为 127.0.0.1（本地），端口用默认的 80 就行，最后记得把服务器页面位置改为你存放离线 .html 文件的目录，搞定。

开启 HTTP 服务器后，你在浏览器上的地址框内输入的内容可就要变变了。

其实就是把你存放离线网页的文件夹目录改为 127.0.0.1，再加上文件名的方式访问，访问地址比如会变成这样，127.0.0.1为什么你还在用网易云音乐？.html。

通过这一波操作后，浏览器打开的网页就又可以开心使用扩展了。

这里再多提一嘴，Everything 的 HTTP 服务如果是在公网环境下（你在家使用当然没有任何这方面的隐患），贸然打开还是有泄露文件的风险，小伙伴们谨慎使用。

不管怎么说，SingleFile 这个扩展真的是帮了大忙，但是下载网页不过是我们获取知识的第一步，后续的管理、复习、深入同样重要且重要程度没有先后之分。

在信息被炸成碎片的今天，我们或许有很多获取知识的手段，但不管什么时候，我还是希望大家能在本地搞一个备份。

因为你永远不知道你原先看到的那些教程、那些前人的精华分享什么时候会消失在网络。

至于我们收藏的那些东西，既然已经被我们收藏，就别让它一直吃灰，学习永远都是进行时。

后续，我可能会考虑出一个关于本地文件管理的心得分享文章，先挖个坑，感兴趣的话，用一大波在看砸过来。

长按二维码关注回复 210226 获取