如何使用HTML5本地儲存區分瀏覽器刷新和關閉？

識別刷新和關閉瀏覽器操作

當兩個操作觸發ONUNLOAD 事件時，區分頁刷新和瀏覽器關閉可能會帶來挑戰。但是，有一個使用 HTML5 本機儲存和客戶端/伺服器 AJAX 通訊的解決方案。

Onunload 事件處理

在頁面的視窗中，新增onunload 事件處理程序：

function myUnload(event) {
    // Set a local storage flag indicating an unload event
    if (window.localStorage) {
        window.localStorage['myUnloadEventFlag'] = new Date().getTime();
    }

    // Notify the server of a disconnection request
    askServerToDisconnectUserInAFewSeconds(); // Synchronous AJAX call
}

Onload 事件處理。 >在頁面正文中，新增onload 事件處理程序：

function myLoad(event) {
    if (window.localStorage) {
        // Check the time between the last unload event and the current time
        var t0 = Number(window.localStorage['myUnloadEventFlag']);
        var t1 = new Date().getTime();
        var duration = t1 - t0;

        if (duration < 10 * 1000) {
            // Page reloaded: Cancel disconnection request
            askServerToCancelDisconnectionRequest(); // Asynchronous AJAX call
        } else {
            // Tab/window closed: Perform desired action
        }
    }
}

伺服器端管理

在伺服器上，實作一個流程來收集斷開連接請求並調度一個計時器線程來檢查逾時請求。在 5 秒內（在本範例中），中斷請求逾時的使用者。如果收到斷開連線取消，請從清單中刪除相應的請求。

此方法也可用於區分選項卡/視窗關閉和連結/表單提交。將事件處理程序放置在所有帶有連結或表單及其登陸頁面的頁面上。

雖然此解決方案使用本機存儲，但請注意，它可能不適合不支援 HTML5 本機儲存的瀏覽器。考慮處理這些場景的具體方法。

以上是如何使用HTML5本地儲存區分瀏覽器刷新和關閉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！