如何使用HTMLTableElement对象？sessionStorage存储表格恢复问题

你遇到的核心问题是直接存储DOM元素对象到sessionStorage，而sessionStorage仅支持存储字符串类型。当你把DOM对象存进去时，它会被自动转换为字符串[object HTMLTableElement]，自然无法还原成完整的表格结构。

要实现表格的保存与恢复，你需要存储表格的HTML结构字符串（而非DOM元素对象），具体用outerHTML属性获取包含表格自身标签的完整HTML代码，恢复时直接替换目标元素的HTML即可。

$(document).ready(function () {
    // 获取表格元素
    const table = document.querySelector('.overallTable');
    // 存储初始表格的完整HTML结构
    sessionStorage.setItem('init', table.outerHTML);

    // 丢弃修改按钮：恢复到初始表格状态
    document.getElementById("dcChanges").addEventListener("click", function () {                                             
        const initTableHtml = sessionStorage.getItem('init');
        if (initTableHtml) {
            // 替换当前表格的HTML为初始状态
            table.outerHTML = initTableHtml;
        }
        // 可选：对比初始状态和缓存状态
        const cacheTableHtml = sessionStorage.getItem('cache');
        if (initTableHtml === cacheTableHtml) {
            console.log("当前缓存与初始状态一致");
        }
    });

    // 保存到缓存按钮：存储当前表格的HTML结构
    document.getElementById("saveInCache").addEventListener("click", function () {
        const currentTableHtml = table.outerHTML;
        sessionStorage.setItem('cache', currentTableHtml);
        console.log("当前表格HTML已存入缓存");
        console.log("缓存内容：", currentTableHtml);
    });
});

• 存储内容替换：把JSON.stringify(table)和直接存table改为存储table.outerHTML，确保保存的是可直接复用的HTML字符串。
• 恢复逻辑修正：直接通过table.outerHTML = 存储的HTML字符串替换整个表格，避免了getElementsByClassName返回集合无法直接操作的问题。
• 缓存对比优化：对比的是HTML字符串而非DOM对象，确保判断逻辑有效。

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