如何在页面刷新后保留复选框的选中状态？

一、前端本地存储方案（无需后端，快速实现） #

适合快速验证功能，状态保存在用户浏览器本地，刷新页面不会丢失。

1. 修正并优化HTML代码 #

给每个复选框添加唯一标识（比如用户ID），同时修正原HTML中标签嵌套错误：

<!-- Department's Table -->
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Surname</th>
      <th scope="col">Phone</th>
      <th scope="col">Email</th>
      <th scope="col">Authorisation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Test</td>
      <td>Test</td>
      <td>0555 555 55 55</td>
      <td>test@test.com.tr</td>
      <td>
        <div style="text-align: center;">
          <input type="checkbox" data-user-id="1">
        </div>
      </td>
    </tr>
    <!-- 新增用户行时，给data-user-id设置唯一值即可 -->
  </tbody>
</table>
<!-- End Authorisation For Departments Table Example -->

2. 添加JavaScript实现状态保存与恢复 #

// 页面加载时，从本地存储恢复复选框状态
document.addEventListener('DOMContentLoaded', function() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"][data-user-id]');
  checkboxes.forEach(checkbox => {
    const userId = checkbox.dataset.userId;
    // 从localStorage读取保存的状态，默认未勾选
    const savedStatus = localStorage.getItem(`auth_status_${userId}`);
    checkbox.checked = savedStatus === 'true';
  });
});

// 监听复选框变化，实时保存状态到本地存储
document.addEventListener('change', function(e) {
  if (e.target.matches('input[type="checkbox"][data-user-id]')) {
    const userId = e.target.dataset.userId;
    localStorage.setItem(`auth_status_${userId}`, e.target.checked.toString());
  }
});

// 后续获取所有权限状态的方法（供评分系统调用）
function getAllAuthStatuses() {
  const statusMap = {};
  document.querySelectorAll('input[type="checkbox"][data-user-id]').forEach(checkbox => {
    statusMap[checkbox.dataset.userId] = checkbox.checked;
  });
  return statusMap;
}

二、后端持久化方案（正式生产环境） #

如果需要权限状态在不同设备间同步，或需要后台统一管理，必须将状态保存到服务器数据库。

1. 优化HTML代码 #

给复选框添加可识别的name和value属性：

<input type="checkbox" name="authorisation" value="1" data-user-id="1">

2. 前端发送请求与后端交互 #

// 页面加载时，从后端拉取权限状态
document.addEventListener('DOMContentLoaded', async function() {
  try {
    const res = await fetch('/api/get-department-auths'); // 替换为你的后端接口地址
    const authData = await res.json();
    
    document.querySelectorAll('input[type="checkbox"][data-user-id]').forEach(checkbox => {
      const userId = checkbox.dataset.userId;
      checkbox.checked = authData[userId] || false;
    });
  } catch (err) {
    console.error('加载权限状态失败:', err);
  }
});

// 复选框变化时，同步状态到后端
document.addEventListener('change', async function(e) {
  if (e.target.matches('input[type="checkbox"][data-user-id]')) {
    const userId = e.target.dataset.userId;
    const isAuthorized = e.target.checked;
    
    try {
      await fetch('/api/save-department-auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, isAuthorized })
      });
    } catch (err) {
      console.error('保存权限状态失败:', err);
      // 保存失败时回滚复选框状态
      e.target.checked = !isAuthorized;
    }
  }
});

3. 后端接口示例（Node.js/Express） #

// 后端获取权限状态接口
app.get('/api/get-department-auths', async (req, res) => {
  try {
    // 从数据库查询权限记录，示例使用MySQL语法
    const [rows] = await db.query('SELECT user_id, is_authorized FROM department_auth');
    const authMap = {};
    rows.forEach(row => authMap[row.user_id] = row.is_authorized);
    res.json(authMap);
  } catch (err) {
    res.status(500).json({ error: '获取权限失败' });
  }
});

// 后端保存权限状态接口
app.post('/api/save-department-auth', async (req, res) => {
  const { userId, isAuthorized } = req.body;
  try {
    // 插入或更新数据库记录
    await db.query(
      'INSERT INTO department_auth (user_id, is_authorized) VALUES (?, ?) ON DUPLICATE KEY UPDATE is_authorized = ?',
      [userId, isAuthorized, isAuthorized]
    );
    res.json({ success: true });
  } catch (err) {
    res.status(500).json({ error: '保存权限失败' });
  }
});

内容的提问来源于stack exchange，提问作者Sezin Köktaş