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

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

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

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

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

　　3、將瀏覽時的滾動位置傳到伺服器端，載入頁面時，根據使用者來取最後瀏覽的位置，各種引數傳來調去（跟方案一很類似）

　　4、通過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);

};

　　可以去跑跑效果，肯定意想不到！