使用 MutationObserver 監聽 DOM 變化並更新 Cookie

作者:

在 Web 開發中，我們經常需要監聽 DOM 變化並做出相應的動作，例如儲存變更後的內容。在這篇文章中，我們將探討如何使用 JavaScript 的 MutationObserver 來監聽特定元素的變化，並將其內容存儲到 Cookie 中。

為何需要監聽 DOM 變化？

有時候，頁面上的某些元素會因為 AJAX 請求或動態渲染而改變，而這些變化可能不會觸發標準的事件監聽。因此，若我們需要在這些元素變更時執行特定操作，例如儲存變更後的內容，使用 MutationObserver 會是一個理想的解決方案。

JavaScript 監聽 .am-cappa__name 並更新 Cookie

以下是完整的 JavaScript 程式碼，該程式碼監聽 .am-cappa__name 這個 class 的變化，並將其值存入 Cookie：

document.addEventListener("DOMContentLoaded", function () {
    let lastCappaValue = ""; // 儲存上一次的值，避免重複存相同的值

    function saveCappaName() {
        let cappaElement = document.querySelector(".am-cappa__name");
        if (cappaElement) {
            let cappaValue = cappaElement.innerText.trim();
            if (cappaValue && cappaValue !== lastCappaValue) {
                document.cookie = "am_cappa_name=" + encodeURIComponent(cappaValue) + "; path=/; max-age=86400";
                console.log("Cookie 更新成功: " + cappaValue);
                lastCappaValue = cappaValue; // 更新最後的值
            }
        }
    }

    // 使用 MutationObserver 監聽 `.am-cappa__name` 是否變更
    const observer = new MutationObserver(() => {
        saveCappaName(); // 內容變更時，更新 Cookie
    });

    function startObserving() {
        let targetElement = document.querySelector(".am-cappa__name");
        if (targetElement) {
            observer.observe(targetElement, { childList: true, characterData: true, subtree: true });
            saveCappaName(); // 先存一次當前值
        } else {
            // 若元素還沒出現，每 500ms 檢查一次
            setTimeout(startObserving, 500);
        }
    }

    // **額外增加每 500ms 手動檢查一次**
    setInterval(() => {
        saveCappaName();
    }, 500);

    startObserving(); // 啟動監聽
});

程式碼解析

  1. 使用 MutationObserver 監聽 .am-cappa__name 的變化

    • MutationObserver 是 JavaScript 提供的原生 API，允許我們監聽 DOM 變化。

    • observer.observe() 會監聽 childList、characterData 和 subtree，確保任何子節點或文本變化都能觸發監聽。

  2. 初始時手動執行 saveCappaName()

    • 若 .am-cappa__name 已經存在，則立即儲存它的值到 Cookie 中。

  3. 若元素尚未載入，則每 500ms 檢查一次

    • 若 .am-cappa__name 尚未出現在 DOM 中，則 setTimeout 會每 500ms 檢查一次，直到找到該元素。

  4. 額外的 setInterval 保證更新的可靠性

    • 由於某些情況下 MutationObserver 可能無法捕捉所有變更，因此額外加上一個 setInterval 來確保即使監聽未觸發，也能每 500ms 進行一次檢查。

為何要存入 Cookie？

將 .am-cappa__name 的值存入 Cookie，有助於：

  • 跨頁面存取：Cookie 允許我們在不同頁面之間維持數據。

  • 持久化數據：透過 max-age=86400（一天），我們可以在使用者關閉瀏覽器後仍保留該數據。

  • 後端存取：伺服器可以透過 HTTP request header 讀取該 Cookie，從而做進一步處理。

結論

使用 MutationObserver 可以有效監聽 DOM 變化，並結合 Cookie 來儲存變更的內容。這樣的技術可以應用於許多情境，例如動態表單內容儲存、使用者偏好設定等，讓網頁的互動性和便利性大幅提升。

發佈留言