使用sessionstorage解決微信網頁返回保留原狀態的問題
阿新 • • 發佈:2019-01-10
之前做一個專案,關於微信方面的,遇到了需要返回保留原狀態的問題,卡了一段時間,最後用sessionstorage解決了問題,趕緊來做個筆記。
做的是商城相關的,整個頁面都是用ajax動態生成的,微信在返回上一頁的時候並不是真正的返回,而是相當於location.herf,這就造成了極大的不便,使得資料又要從伺服器端獲取,這樣就會回到頂部的位置(不僅是微信,絕大部分webview的瀏覽器都是這個套路),既然這個相當於location.herf的返回不能改變,那麼就只能從別的方向上去解決這個問題了。
sessionstorage是html5中新新增的屬性,跟localstorage使用的是同一套api。sessionstorage與他的兄弟不一樣的是這個傢伙在關閉瀏覽器的同時自動清除,滿足我的需求。
基本思路就是在點選商品時使用sessionstorage記錄滾動條距離div頂部的距離,然後在返回時載入頁面時檢測是否有值記錄,有就向下滾動到一定距離
由於我參與的商城專案應用的是無限向下滾動,除了記錄高度之外還要記錄需要載入的頁數即總商品數。部分程式碼如下:
window.onload=function(){ if(sessionStorage.getItem("h")){ console.log(sessionStorage.h); $('.content').scrollTop(sessionStorage.h); var h = $('.content').scrollTop(); if(h == sessionStorage.h) sessionStorage.h=0; } }