Vanilla JS切换表格/图表时localStorage.getItem返回null求助

我正在做表格和图表的切换功能，写了几个函数用localStorage保存用户切换后的状态，但用console.log(localStorage.getItem('dataViewType'))输出时返回null，请问哪里漏了？我的原生JS代码如下：

const data = document.querySelectorAll("button.data");
const dataTable = document.querySelector(".dataTable");
const dataGraph = document.querySelector(".dataGraph");

const ViewdataGraph = () => {
    dataTable.style.display = "none";
    dataGraph.style.display = "block";
    data.forEach(
        (element) => (element.innerText = "View data Table"));
   localStorage.setItem("dataViewType", "Graph");

}

const ViewdataTable = () => {
    dataGraph.style.display = "none";
    dataTable.style.display = "block";
    data.forEach(
        (element) => (element.innerText = "View data Graph"));
   localStorage.setItem("dataViewType", "table");

}

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

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

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

        }
    }
};




window.addEventListener("DOMContentLoaded", (event) => {

    const data = document.querySelectorAll("button.data");
    data.forEach((element) =>
        element.addEventListener("click", (event) => ToggleData()),
    );
}

1. 函数名大小写不匹配（核心问题） #

JS是大小写敏感语言，你定义的切换函数是Toggledata（小写d），但点击事件里调用的是ToggleData（大写D），导致点击按钮时根本没触发对应函数，自然不会往localStorage写入任何值，所以getItem返回null。

2. 页面加载时未恢复保存的状态 #

即使修复了函数名，页面刷新后也不会自动读取localStorage的状态，需要在DOMContentLoaded事件里主动调用一次Toggledata()，恢复用户上次的选择。

3. 重复声明变量（非致命但需优化） #

DOMContentLoaded回调里重复声明了data变量，和全局的data重复，虽然不报错，但没必要，直接复用全局变量即可。

const data = document.querySelectorAll("button.data");
const dataTable = document.querySelector(".dataTable");
const dataGraph = document.querySelector(".dataGraph");

const ViewdataGraph = () => {
    dataTable.style.display = "none";
    dataGraph.style.display = "block";
    data.forEach(element => element.innerText = "View data Table");
    localStorage.setItem("dataViewType", "Graph");
}

const ViewdataTable = () => {
    dataGraph.style.display = "none";
    dataTable.style.display = "block";
    data.forEach(element => element.innerText = "View data Graph");
    localStorage.setItem("dataViewType", "table");
}

const Toggledata = () => {
    const dataType = localStorage.getItem("dataViewType");
    // 无保存状态时默认显示表格，可根据需求调整
    if (!dataType) {
        ViewdataTable();
        return;
    }
    dataType === "table" ? ViewdataTable() : ViewdataGraph();
};

window.addEventListener("DOMContentLoaded", (event) => {
    // 页面加载时恢复保存的状态
    Toggledata();
    // 绑定点击事件，确保函数名大小写一致
    data.forEach(element =>
        element.addEventListener("click", Toggledata)
    );
});

内容的提问来源于stack exchange，提问作者eme