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

编者按

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

言归正传,怎么开始来具体分析呢?下面作者大家一一解开!

一、使用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等,此处不赘述了。另外,本文的分析工具和分析方法,也是值得大家思考的。

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181122B00TJU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励