html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態

這篇文章將為大家詳細講解有關html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

比如在頁面A中點開了一個折疊列表（用jquery做的），并且向下拖動了一點滾動條，然后通過列表中的某個按鈕跳轉到了頁面B，B頁面中有一個goback按鈕，點擊一下就能跳回頁面A，跳回頁面A時，滾動條保持在之前離開時的狀態，并且之前打開的那個折疊列表也要是保持打開的。有哪些html5 API或jquery API可以實現嗎？
ps：我試了jquery 中的history.back()，可以實現滾動條位置不變，但是折疊列表變成了初始狀態（也就是說和刷新了頁面一樣），具體如下：

頁面分為兩個，一個是列表頁：
一個是內容頁：

先說列表頁：

你可以觀察到我在列表頁展開時是帶有錨的，當列表頁加載時，若 JS 檢測到 URL 上有錨，展開對應的折疊列表；若 URL 上沒有錨的時候，就展開第一個，并且滾動條不滾動。

當點擊折疊列表的 panel-heading 時，使用 history.pushState(null, null, url) ，改變 URL 上的錨，并展開該折疊列表以及滾動到該折疊列表的頂部。
然后說一下內容頁里的「返回」：
首先需要判斷一下入口鏈接是什么，使用 document.referrer 即可。
然后可能出現以下兩種情況：
1、用戶是從你的折疊列表進入該內容頁的，那么你可以使用 history.back()，這時之前使用 history.pushState() 改變的錨還保留，而且會自動展開并滾動到這個錨所對應的折疊列表。
2、用戶是直接在地址欄輸入鏈接進入的，此時你可以直接用 location.href = url 將它跳轉到它的上一級鏈接中。
具體的效果你可以來我們網站看：計蒜客 - 讓學習更有味，要進入內容頁需要登錄才行~ 你這種需求比較適合使用 URL 來保存狀態，然后使用 URL 來進行事件驅動。這樣的好處在于將各個頁面的狀態保存在各自的 URL 里，不管是使用瀏覽器的前進后退還是將當前鏈接分享給他人，都不會丟失頁面狀態。
驅動過程分為以下幾步：
修改 URL (trigger) -> 解析 URL -> 調用對應的回調 (listener)
其中：

• 為了不引發界面刷新，修改 URL 時需要使用 URL hash 或者 history.pushState()。
  

• 注冊 listener、解析 URL 和調用 listener 可以交給前端路由。（自己年輕的時候也造過一個前端路由的輪子 PRouter.js。（逃

當然如果不希望把一些狀態保存在 URL 里，那也可以保存在 localStorage 里。但不變的是一定要用狀態來驅動頁面行為，而不是先執行頁面行為然后再去保存狀態。 簡單的狀態可以放在hash里
再復雜點的可以放在localstorage或者sessionstorage里
要是再復雜的話，建議還是層疊多個視圖吧，這樣無論多復雜的狀態都會保存 題主如果用 傳統的整頁刷新模式，那必然需要 hash 標記 + jQuery 插件響應的“打配合”方案。但這實在沒必要，子欄目頁面之間切換而產生的反復加載、解析、執行、渲染，會非常浪費性能……
所以，以“局部刷新”著名的 AJAX 模式，自然是實現“局部駐留”的極佳方案（IE 6 中的 Outlook Web 版是最早的實現）～
而且，jQuery 的 load() 實例方法已經把 AJAX Get 請求、jQuery empty()、jQuery html() 封裝起來，分分鐘實現 局部刷新～
以上是 用戶瀏覽過程的“前進階段”，而“后退階段”就需要先在前進時留下歷史記錄，再在用戶后退（瀏覽器后退功能 或 用戶觸發了前端工程師寫的包含 history.back() 調用的代碼）時恢復之前局部刷新過的 正文子頁面，并把頁面主框架中的 全局導航菜單 指向對應的條目。這種為 AJAX 記錄歷史信息的技術就是 HTML 5 History API（history.pushState() 是其最常用的 方法），IE 8/9 可以用 window.onhashchange 兼容，IE 6/7 就只能用 settimeout() 模擬 hashchange 事件 或用 iframe 的 window.history 來記錄 window.parent 的 AJAX 歷史～
上述兼容在 Github 上已有成熟的開源庫，也有結合 AJAX、pushState 的成熟框架 —— PJAX～
（習慣 jQuery 風格 API 的人，推薦一下本人開發的 PJAX 模式框架 —— EasyWebApp，托管于 Git@OSC ——  http://git.oschina.net/Tech_Query/EasyWebApp ） 網頁的結構天然是不應當返回的，只有前進。
返回這塊被瀏覽器拿去了。
自定義一個鏈接，跳轉到另外的頁面上。那就給目標頁面增加Hash之類的狀態識別。 三個方法 1,hash 2,localstroge 3,cookie 之前用localstorage做過，把要保存的狀態push到一個對象里，加載頁面的時候判斷對象，不過localstorage不能不能設定壽命，也就是說你無法在用戶離開你的頁面時清除，所以建議你試試sessionstorage， 跟session的用法一樣，會在用戶離開時清除。

關于“html5、jquery如何實現在回到歷史頁面時完全保留之前離開這個頁面時的狀態”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。