如果用戶導航離開頁面，如何保持頁面狀態？

Question

我有一個基於用戶交互改變dom的頁面。但是，用戶可能會點擊一個鏈接，該鏈接將導航到外部網站。如果用戶點擊後退按鈕，我的頁面會再次顯示，但dom更改不會持續。

跟蹤用戶交互的最佳方式是什麼，以便我可以在他們的回報中重建頁面？

爲了保持狀態並重建頁面，我需要跟蹤7-10個變量。

一些想法我有：

• 服務器端會話 - 每當一個變量的變化值，就需要一個回調到服務器？
• 客戶端cookie - 如果用戶禁用cookie，該怎麼辦？
• 隱藏表單域 - 大多數（所有？）瀏覽器本地緩存表單數據，所以點擊後退按鈕應該保留？

Answer 1

嘗試Session變量：

sessionStorage.setItem('key', { "data": "mad data here" }); 

然後將其調出：

document.load(function() { 
    var data = sessionStorage.getItem('key'); 
    if (data) { 
     data.doStuff(); 
    } 
} 

Answer 2

在大多數：

var data = sessionStorage.getItem('key'); 

你可以在加載頁面使用jQuery這樣我想說的最好的方法就是代表p網址中的年齡狀態。

這裏的原因：

• 因爲URL是這樣一個簡單的概念，這種方法的工作原理是什麼瀏覽器或者什麼隱私設置而不管（例如允許Cookie和本地存儲）的使用。
• 如果用戶A將URL發送給用戶B，他們希望看到頁面處於相同的狀態，這仍然有效。這不適用於您所考慮的任何方法。

如果您想跟蹤的變量與特定用戶（或會話）相關，那麼在某種會話中跟蹤這些變量會更明智。這可能是服務器端或客戶端。

本地或會話存儲（HTML5 Local storage vs. Session storage）是可能的解決方案，但有一些限制。

1. 在每個瀏覽器或瀏覽器設置無效（HTML5本地存儲不老的瀏覽器的支持，我知道例如，在隱私模式下運行的Safari瀏覽器不允許本地存儲）
2. 如果您會發送鏈接給另一個用戶，他不會看到處於相同狀態的頁面，因爲他之前沒有訪問該頁面，並且他的本地或會話存儲未填充正確的值。