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

01-04

比如在頁面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 —— EasyWebApp 官方網站）

之前用localstorage做過，把要保存的狀態push到一個對象里，載入頁面的時候判斷對象，不過localstorage不能不能設定壽命，也就是說你無法在用戶離開你的頁面時清除，所以建議你試試sessionstorage，跟session的用法一樣，會在用戶離開時清除。

三個方法 1,hash 2,localstroge 3,cookie

網頁的結構天然是不應當返回的，只有前進。

返回這塊被瀏覽器拿去了。

自定義一個鏈接，跳轉到另外的頁面上。那就給目標頁面增加Hash之類的狀態識別。