如何保存支持单元格背景色切换的HTML表格状态，实现跨会话恢复？

我有一个HTML表格，允许用户点击单元格切换其背景色。请问如何保存表格及已切换单元格的状态，使用户在其他会话重新访问页面时，相同的单元格仍处于高亮状态？

要实现跨会话保存单元格高亮状态，最直接的方案是利用浏览器的**localStorage本地存储API**，它能将数据永久保存在用户浏览器中（除非手动清除），满足跨会话恢复的需求。

实现步骤 #

1. 用单元格的行、列索引作为唯一标识，准确定位每个单元格
2. 页面加载时，读取localStorage中存储的高亮单元格列表，恢复对应单元格的高亮状态
3. 用户点击单元格切换高亮时，同步更新localStorage中的数据

完整代码示例 #

HTML（含CSS）

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .green {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>row1 col1</td>
            <td>row1 col2</td>
            <td>row1 col3</td>
            <td>row1 col4</td>
        </tr>
        <tr>
            <td>row2 col1</td>
            <td>row2 col2</td>
            <td>row2 col3</td>
            <td>row2 col4</td>
        </tr>
        <tr>
            <td>row3 col1</td>
            <td>row3 col2</td>
            <td>row3 col3</td>
            <td>row3 col4</td>
        </tr>
        <tr>
            <td>row4 col1</td>
            <td>row4 col2</td>
            <td>row4 col3</td>
            <td>row4 col4</td>
        </tr>
    </table>
</body>
</html>

JavaScript

$(function () {
    // 定义存储高亮状态的键名
    const STORAGE_KEY = 'highlightedCells';

    // 从本地存储恢复高亮状态
    function restoreHighlight() {
        // 读取存储的高亮列表，没有则返回空数组
        const highlightedCells = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
        highlightedCells.forEach(cellPos => {
            // 根据行、列索引找到对应单元格并添加高亮类
            $('tr').eq(cellPos.row).find('td').eq(cellPos.col).addClass('green');
        });
    }

    // 将当前高亮状态保存到本地存储
    function saveHighlight() {
        const highlightedCells = [];
        // 遍历所有高亮的单元格
        $('td.green').each(function() {
            // 获取当前单元格的行索引和列索引
            const rowIndex = $(this).closest('tr').index();
            const colIndex = $(this).index();
            highlightedCells.push({row: rowIndex, col: colIndex});
        });
        // 转成JSON字符串存入localStorage
        localStorage.setItem(STORAGE_KEY, JSON.stringify(highlightedCells));
    }

    // 页面加载完成后立即恢复高亮
    restoreHighlight();

    // 点击单元格切换高亮并保存状态
    $('td').click(function () {
        $(this).toggleClass('green');
        saveHighlight();
    });
});

关键说明 #

• localStorage存储的数据仅在当前浏览器中有效，不同浏览器或设备无法共享状态；如果需要跨设备同步，得结合后端数据库实现
• 存储的数据会永久保留，除非用户手动清除浏览器缓存或调用localStorage.removeItem(STORAGE_KEY)删除
• 用行、列索引作为单元格标识的前提是表格结构不会动态变化；如果表格行/列会增删，建议给单元格设置固定的id来替代索引

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