如何实现HTML表格新增数据持久化存储，刷新页面仍保留？

1. 纯前端实现（无需后端，浏览器本地存储+Excel导入导出） #

浏览器无法直接读写本地Excel文件（受安全限制），我们可以用localStorage在浏览器本地持久化数据，同时支持Excel格式的导入导出，实现类Excel的存储需求。

核心功能： #

• 页面加载自动读取历史数据并渲染表格
• 新增行、编辑单元格后自动保存数据
• 支持导出当前表格为Excel文件
• 支持导入本地Excel文件恢复数据

完整代码示例： #

<!DOCTYPE html>
<html>
<head>
    <title>持久化表格</title>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ccc; padding: 8px; }
        button { margin: 0 5px; padding: 6px 12px; }
    </style>
</head>
<body>
    <button onclick="addRow()">新增行</button>
    <button onclick="exportToExcel()">导出Excel</button>
    <button onclick="importFromExcel()">导入Excel</button>
    <input type="file" id="excelFile" accept=".xlsx" style="display:none;">
    <table id="dataTable">
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
                <th>列4</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        const TABLE_ID = 'dataTable';
        const STORAGE_KEY = 'tableData';

        // 页面加载初始化表格
        window.onload = loadDataFromStorage;

        // 从localStorage读取数据并渲染
        function loadDataFromStorage() {
            const storedData = localStorage.getItem(STORAGE_KEY);
            const tableBody = document.querySelector(`#${TABLE_ID} tbody`);
            tableBody.innerHTML = '';

            let data = storedData ? JSON.parse(storedData) : [
                ['初始数据1-1', '初始数据1-2', '初始数据1-3', '初始数据1-4'],
                ['初始数据2-1', '初始数据2-2', '初始数据2-3', '初始数据2-4']
            ];
            
            if (!storedData) saveDataToStorage(data);
            data.forEach(row => addRowToTable(row));
        }

        // 保存数据到localStorage
        function saveDataToStorage(data) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
        }

        // 新增带默认内容的行
        function addRow() {
            const rowData = [`新数据-${Date.now()}`, '', '', ''];
            addRowToTable(rowData);
            saveDataToStorage(getCurrentTableData());
        }

        // 将行数据插入表格
        function addRowToTable(rowData) {
            const tableBody = document.querySelector(`#${TABLE_ID} tbody`);
            const tr = document.createElement('tr');
            
            rowData.forEach(cell => {
                const td = document.createElement('td');
                td.contentEditable = true;
                td.textContent = cell;
                td.onblur = () => saveDataToStorage(getCurrentTableData());
                tr.appendChild(td);
            });
            
            tableBody.appendChild(tr);
        }

        // 获取当前表格所有数据
        function getCurrentTableData() {
            const rows = document.querySelectorAll(`#${TABLE_ID} tbody tr`);
            return Array.from(rows).map(row => 
                Array.from(row.querySelectorAll('td')).map(cell => cell.textContent)
            );
        }

        // 导出为Excel文件
        function exportToExcel() {
            const data = [['列1', '列2', '列3', '列4'], ...getCurrentTableData()];
            const worksheet = XLSX.utils.aoa_to_sheet(data);
            const workbook = XLSX.utils.book_new();
            
            XLSX.utils.book_append_sheet(workbook, worksheet, '表格数据');
            XLSX.writeFile(workbook, '表格数据.xlsx');
        }

        // 触发Excel文件选择
        function importFromExcel() {
            document.getElementById('excelFile').click();
        }

        // 处理Excel文件导入
        document.getElementById('excelFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(event) {
                const workbook = XLSX.read(new Uint8Array(event.target.result), { type: 'array' });
                const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                const importedData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }).slice(1);
                
                const tableBody = document.querySelector(`#${TABLE_ID} tbody`);
                tableBody.innerHTML = '';
                
                importedData.forEach(row => {
                    while (row.length < 4) row.push('');
                    addRowToTable(row);
                });
                
                saveDataToStorage(importedData);
                e.target.value = '';
            };
            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

2. 后端实现（Node.js+Excel文件存储） #

如果需要多人共享历史数据，可通过Node.js后端直接读写服务器上的Excel文件：

后端代码（Node.js）： #

const express = require('express');
const XLSX = require('xlsx');
const path = require('path');
const app = express();

app.use(express.json());
app.use(express.static('public'));

const EXCEL_PATH = path.join(__dirname, 'tableData.xlsx');

// 初始化Excel文件（不存在则创建）
function initExcel() {
    try {
        XLSX.readFile(EXCEL_PATH);
    } catch {
        const workbook = XLSX.utils.book_new();
        const worksheet = XLSX.utils.aoa_to_sheet([
            ['列1', '列2', '列3', '列4'],
            ['初始数据1-1', '初始数据1-2', '初始数据1-3', '初始数据1-4'],
            ['初始数据2-1', '初始数据2-2', '初始数据2-3', '初始数据2-4']
        ]);
        XLSX.utils.book_append_sheet(workbook, worksheet, '表格数据');
        XLSX.writeFile(workbook, EXCEL_PATH);
    }
}

// 获取表格数据接口
app.get('/api/data', (req, res) => {
    const workbook = XLSX.readFile(EXCEL_PATH);
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
    const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    res.json(data.slice(1));
});

// 更新表格数据接口
app.post('/api/data', (req, res) => {
    const newData = [['列1', '列2', '列3', '列4'], ...req.body];
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.aoa_to_sheet(newData);
    
    XLSX.utils.book_append_sheet(workbook, worksheet, '表格数据');
    XLSX.writeFile(workbook, EXCEL_PATH);
    res.json({ success: true });
});

initExcel();
app.listen(3000, () => console.log('服务器运行在http://localhost:3000'));

前端修改要点： #

将原localStorage相关逻辑替换为后端请求：

// 页面加载从后端拉取数据
window.onload = () => {
    fetch('/api/data')
        .then(res => res.json())
        .then(data => {
            const tableBody = document.querySelector('#dataTable tbody');
            tableBody.innerHTML = '';
            data.forEach(row => addRowToTable(row));
        });
};

// 保存数据到后端
function saveDataToBackend(data) {
    fetch('/api/data', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    });
}

// 新增行、单元格编辑后调用saveDataToBackend(getCurrentTableData())

部署说明： #

1. 安装依赖：npm install express xlsx
2. 将前端HTML文件放入public目录
3. 启动后端：node server.js，访问http://localhost:3000

内容的提问来源于stack exchange，提问作者Izan Onaindia Osorio