1 回答

TA貢獻1865條經驗 獲得超7個贊
由于題主沒有明確表示要實現什么效果,我只好按我個人理解為本題需要實現“在到頁面B后,按后退按鈕,被Ajax加載內容修改過DOM的頁面A能夠維持最后的狀態”。
對于這個問題,我也沒有經驗,于是在研究了一大會,搞明白點了,以下就現學現賣了。
想要實現預期中的效果,需要明白瀏覽器的實現,就是在內存中保存頁面的最后狀態,在從跳轉后的頁面返回時,直接展現保存了狀態的頁面。這個技術在 Firefox 里叫 Back-Forward Cache,而在 sarafi 里叫 page cache,然后很遺憾,chrome 里并未實現。
測試方法,請依次操作觀察效果:
載入頁面后點擊“Modify the DOM”,頁面DOM發生了變化
點擊“Go to another page”,跳轉到下一個頁面
點擊瀏覽器的“后退”按鈕
在IE8、FF 15.0.1 和 Chrome 22.0.1229.79 m 測試后得知:
IE8、Chrome 均無法保存A和B的最后狀態(肯定了,不支持 page cache)
Firefox 都保存了A和B的最后狀態
關于 Firefox 的 Back-Forward Cache 在什么情況下會失效,我搬點內容過來:
頁面注冊了 unload 和 beforeunload 事件;
頁面設置了 "cache-control: no-store"
站點是 HTTPS,并且頁面至少符合以下條件:
"Cache-Control: no-cache"
"Pragma: no-cache"
設置了 "Expires: 0",或者 "Expires" 的日期比 "Date" 指定的早 (有個例外是,如果指定了"Cache-Control: max-age=",cache 依然有效);
用戶訪問其他頁面時候,當前頁因為網絡原因未完全加載完,比如用到了XMLHttpRequest
……
所以,推薦題主按FF提供的內容,讓它的BF Cache失效,然后用戶在后退到頁面A的時候依然會觸發onload事件,你讀取cookie加載內容就好了。
PS:既然你要保存頁面狀態,為什么還要用與之相矛盾的“no-store”?
添加回答
舉報