国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
【深度分析】微信公眾號文章閱讀進度的保存原理
案例
隨筆
知識
聲音
其他
編者按
這篇文章從代碼的角度,分析了微信公眾號文章的閱讀進度保存原理。感謝“麻辣牛肉粉”、“波哥”、“=_=”、“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等,此處不贅述了。另外,本文的分析工具和分析方法,也是值得大家思考的。
本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
cookies,sessionStorage和localStorage的區(qū)別
突襲HTML5之Javascript API擴展3
HTML5 WebStorage(HTML5本地存儲技術)
HTML5本地存儲:SessionStorage, LocalStorage, Cookie
前端幾種本地緩存機制
Cookie 已涼,Web 存儲該這么做!| 技術頭條
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服