localStorage.setItem 不適用於切換按鈕

Question

我在圖表和數據表視圖之間切換。 我正在使用本地存儲來保存狀態。 從我的控制台中，我可以看到 dataViewType 未設置或保存在我的本地存儲中。 我正在使用 vanilla JavaScript，我有什么問題或遺漏了什么？

更新：我現在可以設置 dataViewType，但是如何獲取它/保留刷新時的狀態？ 代碼反映了新的變化。

    const toggleData = () => {
    const data = document.querySelectorAll("button.data");
    const dataTable = document.querySelector(".dataTable");
    const dataGraph = document.querySelector(".dataGraph");
    let dataType = localStorage.getItem("dataViewType");
    if (dataType = "block") {
        if (dataTable.style.display === "block") {
            dataTable.style.display = "none";
            dataGraph.style.display = "block";
            data.forEach(
                (element) => (element.innerText = "View data as Table"),
                localStorage.setItem("dataViewType", "block")

            );
        } else {
            dataGraph.style.display = "none";
            dataTable.style.display = "block";
            data.forEach(
                (element) => (element.innerText = "View data as Graph"),
                localStorage.setItem("dataViewType", "none")
            );
        }
    }
};
    window.addEventListener("DOMContentLoaded", (event) => {
    
        const data = document.querySelectorAll("button.data");
        data.forEach((element) =>
            element.addEventListener("click", (event) => ToggleData()),
        );
    }

Answer 1

您的切換例程中的邏輯是錯誤的。 首先，這兩個函數都不會被執行，除非已經在dataViewType的 dataViewType 下存儲了一些東西，並且如果存儲了一些東西，相同的函數將一遍又一遍地執行，因為它設置了觸發該函數執行的相同值。 ..

因此，您需要刪除if (dataType) {並切換其他條件的位置：

const Toggledata = () => {
    const dataType = localStorage.getItem("dataViewType");

        if (dataType === "Graph") {
            ViewdataTable();

        } else if (dataType === "Table") {
            ViewdataGraph();

        }
};