微信公众号文章阅读进度的保存原理

编者按

微信公众号文章的阅读进度保存功能，通过第一期“限期挑战”，吸收了很多人的实验和分析。这篇小文也算是一个总结。

言归正传，怎么开始来具体分析呢？下面作者大家一一解开！

一、使用Chrome浏览器

二、登陆

双击打开这个工具，出现扫码登陆的界面：

用你的微信号扫描后，登陆成功见下图：

三、详细分析

我们随便找一片文章进行分析，以《沙特记者失踪的事，那秀文笔的狗尿苔》为例吧。地址这里：

把这个地址复制到开发工具的地址栏，Chrome浏览器需要你按一下键盘的 F12。最后打开的效果如下：

重点关注一下右侧红色框框部分。

阅读进度应该是个 scroll 值，到底保存在 cookie ，还是 Local Storage 里面呢？我们首先来看看 cookie 里面是否存在。

红色框框内的第一行中有一个 Resources 的选项卡，点击进去后左侧会列出很多本地存储方式的选项，选择我们说的 Cookie 一栏，见下图：

就那么简单两行数据，并没有我们需要的scroll pos 值；那我们再看看 Local Storage 里面呐，见下图：

好家伙！你看滚动条，居然这里藏着这么多东西，而且滚动条还自动滚动最下面了，而且还会看到这个“__WXLS__page_pos，这个是什么鬼？ 不就是我们的 scroll pos 么？

（哈哈，此处有掌声，或许同时伴随着您的“赞赏金额”。）

让我们来验证一下。切换到红色框内的 console 选项卡中，在有 “>” 这个提示符后面，输入 window.localStorage.getItem('__WXLS__page_pos') ，回车后，得到如下效果：

上图是我输入了 2 次进行值的对比，可见我们拖到左边文章位置之后，val 值就发生了改变，如果我们有 2 篇文章会是什么效果呐？ 见下图：

可见，这个里面存储的就是非常简单的 键值对。key 是文章唯一标识，value 是一个带过期时间的阅读进度位置。

com.tencent.mm\app_webview\Local Storage

从“app_webview”这个名称也能看出来，这里保存了用于显示的一些参数值。如果您打开这里的数据，可以看到有很多的类似 键值对的东西。

五、疑问点

1、为什么没有用 cookie 来存储呐？

我想，其一是 cookie 是有大小限制的；其二就是 cookie 每次往服务器送，对服务器来说也是一种资源的浪费。

2、为什么不把进度推送到服务器做保存呐？

还是一样的，同一个用户阅读同一篇文章，还通过两个设备来继续阅读的可能性很小，即便有也是一小部分人（不知道微信是否做过灰度测试，跟踪这种情况的人数），如果存储到服务器，ROI （投出收入比）肯定不合适。

3、为什么还需要设置一个超时值呐？

不知道。

六、结语

Local Storage 在现在移动开发领域里面，应该是应用得非常多的。

【编者注】了解此文，需要大家理解几个概念：键值对、LocalStorage等，此处不赘述了。另外，本文的分析工具和分析方法，也是值得大家思考的。

请长按选择识别图中的二维码并关注【信息时代的犯罪侦查】公众号，了解犯罪手段、侦查技术、办案心得，做到自我提升、自我救赎！