我可以從緩存中加載后退按鈕嗎？

Question

我正在開發一個顯示帖子列表的項目。 在列表的最后，有一個加載更多帖子的按鈕，這個按鈕將通過 Ajax 將另外 12 個帖子加載到列表底部。

我遇到了一個看起來很常見的問題，但是我在搜索了幾天后找不到解決方案，因此我在這里問。

場景：

用戶會點擊按鈕來加載更多帖子，他們這樣做多少次並不重要，但是假設他們點擊了足夠多的時間來加載 100 多個帖子，然后他們決定點擊一個帖子閱讀全文。

問題：

現在是問題所在。 當用戶單擊返回按鈕時，他們將返回帖子列表，但是，帖子列表將作為“新”請求重新加載頁面，而不是顯示上一次遇到該頁面時已加載的 100 多個帖子。 這意味着，如果有人點擊了一個帖子並希望 go 回到他們所在的位置，他們將不得不繼續滾動到底部並多次點擊“加載更多帖子”按鈕，直到他們回到他們所在的位置是。

目標：

我想要實現的是用戶將單擊后退按鈕，並且瀏覽器會將用戶發送回他們所在的相同位置，包括滾動 position （它似乎已經這樣做了）和已經發布的帖子數量加載 - 基本上，在他們離開時將它們發送回帖子列表。

該怎么辦？

每次單擊“加載更多”按鈕時，我可以更新 URL，顯示已顯示的帖子數或單擊按鈕的次數，然后當用戶 go 返回時，加載相同數量的帖子基於 URL 或帖子“位置”（跳過 x 數量的帖子以到達他們所在的相同“位置”），但這可能會導致非常大的 HTTP 請求（一次加載一百個帖子，或更多，如果他們加載更多）或者，當用戶向上滾動時，他們將不得不單擊另一個按鈕來加載以前的帖子，這只是另一個按鈕，由於網站的目的，我不想添加。

理想情況下，后退按鈕將加載頁面的緩存版本，這樣它將導致相同的滾動 position，將加載相同的內容，並且不會涉及新的 HTTP 請求 - 它將顯示頁面是他們離開的時候。

還：

該網站使用 PWA，不確定這是否有幫助，但僅供參考，因為它有一些緩存選項。

有什么想法嗎？

Answer 1

我建議使用localStorage 。

由於 HTTP 請求已經完成。 為什么不將數據寫入localStorage以備將來使用。

我的建議是將數據保存在localStorage中，在帖子頁面的每個頁面加載時，您將向您的服務器發出 1 個請求。 然后，您將檢查您的localStorage中是否有匹配的條目。 fi 是的，這意味着您的localStorage數據是最新的服務器帖子列表，然后當loaded的變量增加時，您將從localStorage加載更多內容，直到顯示來自localStorage的所有帖子，然后您將 go 回到向 HTTP 請求服務器以獲取更多帖子並將其保存在localStorage

要在用戶返回頁面時添加加載帖子的所需行為，應從 URL 參數 onload 讀取loaded的變量