亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么到頁面B,瀏覽器后退,之前設置過的東西都沒了?

為什么到頁面B,瀏覽器后退,之前設置過的東西都沒了?

DIEA 2023-04-13 19:15:58
頁面1,進行操作(ajax請求服務器后設置內容到頁面中,刷新頁面后js設置的東西還在,刷新服務器會判斷cookie而且直接輸出在頁面上),到頁面B,瀏覽器后退,之前設置過的東西都沒了。= = 而且HTTPCODE是200(from cache)。chrome、ff、ie均如此。點菜(ajax):
查看完整描述

1 回答

?
莫回無

TA貢獻1865條經驗 獲得超7個贊

由于題主沒有明確表示要實現什么效果,我只好按我個人理解為本題需要實現“在到頁面B后,按后退按鈕,被Ajax加載內容修改過DOM的頁面A能夠維持最后的狀態”。

對于這個問題,我也沒有經驗,于是在研究了一大會,搞明白點了,以下就現學現賣了。

想要實現預期中的效果,需要明白瀏覽器的實現,就是在內存中保存頁面的最后狀態,在從跳轉后的頁面返回時,直接展現保存了狀態的頁面。這個技術在 Firefox 里叫 Back-Forward Cache,而在 sarafi 里叫 page cache,然后很遺憾,chrome 里并未實現。

測試方法,請依次操作觀察效果:

  1. 載入頁面后點擊“Modify the DOM”,頁面DOM發生了變化

  2. 點擊“Go to another page”,跳轉到下一個頁面

  3. 點擊瀏覽器的“后退”按鈕

在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”?


查看完整回答
反對 回復 2023-04-17
  • 1 回答
  • 0 關注
  • 195 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號