h5頁面使用sessionStorage滾動到上次瀏覽器位置《原創》

• 　　前言：

　　因最近移動端開發過程當中遇到一個運營提出的所謂技術難點需求，對於原生APP來講垂手可得，畢竟本身的APP用戶操做指哪打哪，可是H5該怎麼作?H5就實現不了麼？對於一個愛研究攻克這些前端棘手問題的我來講，我沒嘗試過，我是拒絕對提出需求者說實現不了，作不到之類的。

　　是什麼需求呢？--需求方要求用戶在一個列表頁瀏覽時，點擊一個列表進入詳情頁，返回要求記錄用戶剛剛瀏覽的位置，而不是從新刷新頁面到了頁面頂部。（ps：若是用戶好不容易翻到了第幾10、幾百乃至幾千條時，難道要用戶再重頭開始？可能這個時候跳出率就高了，這個分析的確挺有道理，無力反駁...）。

　　那麼開始腦洞大開了，當時腦子裏出來各類解決方案：

　　一、將瀏覽時的滾動位置存到cookie裏，進到這個頁面再取。那多久銷燬呢？好像不靈活...pass

　　二、將詳情頁經過ifram或者彈框方式引到當前頁，經過操做關閉當前彈窗（那麼在已經完成的頁面上再重構，加操做按鈕？那麼加載效率和體驗呢？...反正不看好）

　　三、將瀏覽時的滾動位置傳到服務器端，加載頁面時，根據用戶來取最後瀏覽的位置，各類參數傳來調去（跟方案一很相似）

　　四、經過H5本地存儲的方式將數據存起來，須要時取值（沒啥經驗，先研究一下吧，好像挺靠譜）

　　接下來先了解一下什麼是本地存儲吧!

• 　　簡介：

　　HTML5 web 存儲,一個比cookie更好的本地存儲方式。

　　首先咱們先了解一下：　

　　什麼是 HTML5 Web 存儲?

　　使用HTML5能夠在本地存儲用戶的瀏覽數據。

　　早些時候,本地存儲使用的是 cookie。可是Web 存儲須要更加的安全與快速. 這些數據不會被保存在服務器上，可是這些數據只用於用戶請求網站數據上.它也能夠存儲大量的數據，而不影響網站的性能.

　　數據以 鍵/值 對存在, web網頁的數據只容許該網頁訪問使用。

　　localStorage 和 sessionStorage 

　　客戶端存儲數據的兩個對象爲：

• localStorage - 沒有時間限制的數據存儲
• sessionStorage - 針對一個 session 的數據存儲（關閉窗口，存儲的數據清空）

　　瞭解完sessionStorage以後是否是很符合咱們的需求呢？將數據存到 session中，管你前進後退仍是刷新，數據依然在，關閉窗口後再進頁面纔會清空數據，那麼徹底符合需求啊，看到這玩意簡直激動快要淚奔了！！！

　　再理一下實現思路，①頁面滾動，將滾動位置存到session中 → ②再次進到頁面中，到session中取出上次保存的瀏覽位置 → ③滾動到對應位置

　　這傢伙簡直好玩到嗷嗷叫啊，睜大眼睛看重點咯！

　　這裏只介紹setItem和getItem，固然還有什麼removeItem刪除key、clear清除全部的key/value操做。

　　setItem存儲value

　　用途：將value存儲到key字段
　　用法：.setItem( key, value)
　　代碼示例：

   sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

　　getItem獲取value

　　用途：獲取指定key本地存儲的值
　　用法：.getItem(key)
　　代碼示例：

  var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

//滾動時保存滾動位置

$(window).scroll(function(){

if($(document).scrollTop()!=0){

　　　　sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滾動位置

　　　} 
});

//onload時，取出並滾動到上次保存位置

 

window.onload = function()
{

　　var _offset = sessionStorage.getItem("offsetTop");

　　$(document).scrollTop(offsetTop);

};

 

　　能夠去跑跑效果，確定意想不到！