前言：
因最近移動端開發過程中遇到一個運營提出的所謂技術難點需求，對於原生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);
};
可以去跑跑效果，肯定意想不到！