案例
隨筆
知識
聲音
其他
編者按
這篇文章從代碼的角度，分析了微信公眾號文章的閱讀進度保存原理。感謝“麻辣牛肉粉”、“波哥”、“=_=”、“iqiqiya”等作出的貢獻。
本文原作者：波哥。
微信公眾號文章的閱讀進度保存功能，通過第一期“限期挑戰(zhàn)”，吸收了很多人的實驗和分析。這篇小文也算是一個總結。
言歸正傳，怎么開始來具體分析呢？下面作者大家一一解開！
一、使用Chrome瀏覽器
下載 “微信Web開發(fā)者工具”并安裝：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140，可以根據(jù)情況選擇下載 32 位或者 64 位的版本。
二、登陸
雙擊打開這個工具，出現(xiàn)掃碼登陸的界面：
用你的微信號掃描后，登陸成功見下圖：
三、詳細分析
我們隨便找一片文章進行分析，以《沙特記者失蹤的事，那秀文筆的狗尿苔》為例吧。地址這里：
https://mp.weixin.qq.com/s/ZdlvbTL8iC33IFKzNoheuQ，
把這個地址復制到開發(fā)工具的地址欄，Chrome瀏覽器需要你按一下鍵盤的 F12。最后打開的效果如下：
重點關注一下右側紅色框框部分。
閱讀進度應該是個 scroll 值，到底保存在 cookie ，還是 Local Storage 里面呢？我們首先來看看 cookie 里面是否存在。
紅色框框內的第一行中有一個 Resources 的選項卡，點擊進去后左側會列出很多本地存儲方式的選項，選擇我們說的 Cookie 一欄，見下圖：
就那么簡單兩行數(shù)據(jù)，并沒有我們需要的scroll pos 值；那我們再看看 Local Storage 里面吶，見下圖：
好家伙！你看滾動條，居然這里藏著這么多東西，而且滾動條還自動滾動最下面了，而且還會看到這個“__WXLS__page_pos，這個是什么鬼？ 不就是我們的 scroll pos 么？
（哈哈，此處有掌聲，或許同時伴隨著您的“贊賞金額”。）
讓我們來驗證一下。切換到紅色框內的 console 選項卡中，在有 “>” 這個提示符后面，輸入 window.localStorage.getItem('__WXLS__page_pos') ，回車后，得到如下效果：
上圖是我輸入了 2 次進行值的對比，可見我們拖到左邊文章位置之后，val 值就發(fā)生了改變，如果我們有 2 篇文章會是什么效果吶？ 見下圖：
可見，這個里面存儲的就是非常簡單的 鍵值對。 key 是文章唯一標識，value 是一個帶過期時間的閱讀進度位置。
四、微信的LocalStorage在哪里?
微信的LocalStorage存儲路徑為：
com.tencent.mm\app_webview\Local Storage
從“app_webview”這個名稱也能看出來，這里保存了用于顯示的一些參數(shù)值。如果您打開這里的數(shù)據(jù)，可以看到有很多的類似 鍵值對的東西。
五、疑問點
1、為什么沒有用 cookie 來存儲吶？
我想，其一是 cookie 是有大小限制的；其二就是 cookie 每次往服務器送，對服務器來說也是一種資源的浪費。
2、為什么不把進度推送到服務器做保存吶？
還是一樣的，同一個用戶閱讀同一篇文章，還通過兩個設備來繼續(xù)閱讀的可能性很小，即便有也是一小部分人（不知道微信是否做過灰度測試，跟蹤這種情況的人數(shù)），如果存儲到服務器，ROI （投出收入比）肯定不合適。
3、為什么還需要設置一個超時值吶？
不知道。
六、結語
我們用帶 webkit 內核的微信web開發(fā)者工具，針對公眾號文章閱讀進度保存位置做了一次淺顯分析，驗證了我們拍腦袋想出來的實現(xiàn)方式是否正確。
Local Storage 在現(xiàn)在移動開發(fā)領域里面，應該是應用得非常多的。
【編者注】了解此文，需要大家理解幾個概念：鍵值對、LocalStorage等，此處不贅述了。另外，本文的分析工具和分析方法，也是值得大家思考的。
