黃聰：3分鐘學會sessionStorage用法

前言：

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

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

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

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

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

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

　　4、通過H5本地存儲的方式将資料存起來，需要時取值（沒啥經驗，先研究一下吧，好像挺靠譜）

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

　　簡介：

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

　　首先我們先了解一下：　

　　使用HTML5可以在本地存儲使用者的浏覽資料。

　　早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料隻用于使用者請求網站資料上.它也可以存儲大量的資料，而不影響網站的性能.

　　資料以 鍵/值 對存在, web網頁的資料隻允許該網頁通路使用。

　　用戶端存儲資料的兩個對象為：

localStorage - 沒有時間限制的資料存儲

sessionStorage - 針對一個 session 的資料存儲（關閉視窗，存儲的資料清空）

　　了解完sessionStorage之後是不是很符合我們的需求呢？将資料存到 session中，管你前進後退還是重新整理，資料依然在，關閉視窗後再進頁面才會清空資料，那麼完全符合需求啊，看到這玩意簡直激動快要淚奔了！！！

　　再理一下實作思路，①頁面滾動，将滾動位置存到session中 → ②再次進到頁面中，到session中取出上次儲存的浏覽位置 → ③滾動到對應位置

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

　　這裡隻介紹setItem和getItem，當然還有什麼removeItem删除key、clear清除所有的key/value操作。

　　用途：将value存儲到key字段

　　用法：.setItem( key, value)

　　代碼示例：

　　用途：擷取指定key本地存儲的值

　　用法：.getItem(key)

//onload時，取出并滾動到上次儲存位置