1. 程式人生 > >使用sessionstorage解決微信網頁返回保留原狀態的問題

使用sessionstorage解決微信網頁返回保留原狀態的問題

   之前做一個專案,關於微信方面的,遇到了需要返回保留原狀態的問題,卡了一段時間,最後用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;
			}
	}