如果用戶離開頁面，如何維護頁面狀態？

Question

我有一個頁面，該頁面根據用戶交互來更改dom。 但是，用戶可能單擊鏈接，該鏈接將導航到外部站點。 如果用戶單擊“后退”按鈕，則會再次顯示我的頁面，但是dom更改不會持續。

跟蹤用戶交互以使他們返回時可以重建頁面的最佳方法是什么？

為了維護狀態並重建頁面，我需要跟蹤7-10個變量。

我有一些想法：

• 服務器端會話 -每次變量更改值時都需要回調服務器嗎？
• 客戶端cookie-如果用戶禁用cookie，該怎么辦？
• 隱藏的表單字段 -大多數（全部？）瀏覽器在本地緩存表單數據，因此單擊后退按鈕應該保留嗎？

Answer 1

在大多數情況下，我會說最好的方法是在URL中表示頁面狀態。

原因如下：

• 因為URL是一個簡單的概念，所以無論使用什么瀏覽器或什么隱私設置（例如，允許cookie和本地存儲），此方法都有效。
• 如果用戶A將URL發送給希望以相同狀態查看頁面的用戶B，則該方法仍然有效。 您考慮的任何方法都不是這種情況。

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

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

1. 不適用於所有瀏覽器或瀏覽器設置（較舊的瀏覽器不支持HTML5本地存儲，例如，我知道以私有模式運行Safari不允許本地存儲）
2. 如果您將鏈接發送給另一個用戶，則他將不會看到處於相同狀態的頁面，因為他之前從未訪問過該頁面，並且他的本地或會話存儲中未填充正確的值。

Answer 2

嘗試Session變量：

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

然后回想一下：

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

您可以在加載頁面時使用jQuery：

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