如何在 Web 應用程式中跨頁面重新載入保留變數？

如何在頁面載入之間保留變數

跨頁面重新載入追蹤使用者操作對於增強Web 應用程式中的使用者體驗至關重要。但是，由於 HTTP 的無狀態性質，此任務可能具有挑戰性。

嘗試與錯誤

嘗試捕獲表單提交事件並隨後取消隱藏隱藏內容失敗欄位被報導。 JavaScript 程式碼使用全域變數（點擊）來儲存提交狀態，但它無法在頁面刷新時保留其值。

解決方案

解決此問題，有以下方法可以實現：

1.查詢字串

使用GET 方法提交表單時，URL 將使用包含參數值對的查詢字串進行更新。這允許您將表單中的輸入欄位設定為特定值。例如，可以新增隱藏欄位：

<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>

在後續頁面載入時，您可以使用JavaScript 解析查詢字串並檢查是否有任何傳遞的值：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

2。 Web 儲存

HTML5 引入了 Web 存儲，它提供了一個 API，用於跨頁面加載在瀏覽器中保存資料。它提供了兩個選項：sessionStorage 和 localStorage。

sessionStorage:

• 資料僅在目前瀏覽會話期間保留。
• 適合儲存臨時數據，例如點擊的數據

點擊按鈕時設定sessionStorage 的程式碼：

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

檢查頁面載入時是否設定sessionStorage 的代碼：

var clicked = sessionStorage.getItem('clicked');

本地儲存：

• 資料無限期地持續存在（除非使用者手動清除）。
• 對於在單一瀏覽會話之外儲存資料很有用。

點擊按鈕時設定localStorage 的程式碼：

$('input[type="submit"][value="Search"]').click(function() {
    localStorage.setItem('clicked', 'true');
});

檢查頁面是否設定了localStorage 的程式碼負載：

var clicked = localStorage.getItem('clicked');

3 。 Cookie

Cookie 提供了另一種持久性資料儲存機制。與 Web Storage 不同，cookie 主要設計用於伺服器端通信，但它們也可用於客戶端資料保留。

jQuery 簡化了cookie 處理：

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

要讀取的程式碼頁面載入時的cookie：

var clicked = $.cookie('clicked');

要刪除cookie，請呼叫$.cookie ('clicked', null）。

4。 window.name

雖然有點不傳統，但window.name 屬性可用於跨頁面刷新儲存資料：

window.name = "my value";

可以儲存字串或序列化物件：

window.name = JSON.stringify({ clicked: true });

但是，這種方法有其限制。它可以跨選項卡和網域訪問，但只能在同一瀏覽會話中進行。通常不建議保存關鍵資料。

以上是如何在 Web 應用程式中跨頁面重新載入保留變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！