html5、jquery如何實(shí)現(xiàn)在回到歷史頁(yè)面時(shí)完全保留之前離開這個(gè)頁(yè)面時(shí)的狀態(tài)

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

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

頁(yè)面分為兩個(gè)，一個(gè)是列表頁(yè)：
一個(gè)是內(nèi)容頁(yè)：

先說列表頁(yè)：

你可以觀察到我在列表頁(yè)展開時(shí)是帶有錨的，當(dāng)列表頁(yè)加載時(shí)，若 JS 檢測(cè)到 URL 上有錨，展開對(duì)應(yīng)的折疊列表；若 URL 上沒有錨的時(shí)候，就展開第一個(gè)，并且滾動(dòng)條不滾動(dòng)。

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

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

• 注冊(cè) listener、解析 URL 和調(diào)用 listener 可以交給前端路由。（自己年輕的時(shí)候也造過一個(gè)前端路由的輪子 PRouter.js。（逃

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

關(guān)于“html5、jquery如何實(shí)現(xiàn)在回到歷史頁(yè)面時(shí)完全保留之前離開這個(gè)頁(yè)面時(shí)的狀態(tài)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。