訪問時回收頁面內容

Question

我正在構建一個小型網站，其中一個頁面上有一個d3.js/highchart可視化演示。可視化是交互式的，可以由用戶修改。

當用戶離開這個頁面並按照這個演示頁面中的鏈接輸入另一個html頁面時，頁面內容不會被保存，當他回來時，他必須再次修改圖表。我的問題是：有什麼辦法來緩存這個演示頁面，只要用戶不關閉瀏覽器頁面，它可以恢復？

我最簡單的想法是讓每個客戶端頁面有一個唯一的ID。這樣我就可以在用戶離開時保存頁面的狀態，當他回來時我可以根據這個ID來覆蓋它的內容。那麼問題是如何爲客戶端頁面實現此ID。

Answer 1

我可以想出很多方法來做這樣的事情。

如果是我，我會將用戶圖表設置存儲在cookie中，因此當他們回到頁面時，您可以簡單地讀取設置的cookie並使用它們重新顯示圖表。

如果您想要保存更長的時間，請將設置發送到服務器以存儲在數據庫中。服務器可以返回一個唯一的ID，然後存儲在一個cookie中，或者簡單地使用會話cookie將圖表設置與會話相關聯。

不使用cookie的替代方法是在您離開時將圖表設置添加到「後退」網址。當用戶點擊返回時，url包含恢復圖表狀態所需的信息。但是，如果他們點擊瀏覽器後退按鈕，這不起作用。

Answer 2

您也可以嘗試存儲頁面的狀態在本地使用或者sessionStorage或localStorage（DOM Storage guide）

Answer 3

如果有兩個或多個選項卡，我不認爲有一種方法一旦被關閉，則區分。我會使用Steve關於在ID + cookie中存儲ID的想法，當用戶回到頁面時，我會根據cookie和數據庫查詢向他們提供他們所有過去修改過的圖表的列表。然後他們可以選擇他們想重新打開的圖表。

Answer 4

您可以在這裏使用History API。

• 當用戶更改圖表的狀態時，頁面URL將更新，其中包含渲染圖表所需的所有參數（通過history.pushState調用）。
• 在頁面加載時，您從url獲得初始狀態（圖表參數）並相應地呈現圖表。

這種方法的一個好處是，你甚至可以發送這樣的URL給另一個人，他們將看到只是相同的自定義圖表。