如何将按钮的data属性保存到LocalStorage并展示到表格中

HTML 结构示例 #

<!-- 带自定义属性的按钮 -->
<button data-nama="Kantorku" data-id="kantorku" data-link="https://example.com/kantorku">添加到列表</button>

<!-- 用于展示数据的表格 -->
<table id="dataTable" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nama</th>
      <th>Link</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据将追加到这里 -->
  </tbody>
</table>

JavaScript 代码实现 #

// 获取按钮和表格元素
const addBtn = document.querySelector('button');
const tableBody = document.querySelector('#dataTable tbody');

// 按钮点击事件监听
addBtn.addEventListener('click', function() {
  // 获取按钮的自定义属性值
  const dataId = this.getAttribute('data-id');
  const dataNama = this.getAttribute('data-nama');
  const dataLink = this.getAttribute('data-link');

  // 构造要求格式的数据对象
  const newData = {
    'data-id': dataId,
    'data-nama': dataNama,
    'data-link': dataLink
  };

  // 从LocalStorage读取现有数据，若无则初始化为空数组
  let storedData = JSON.parse(localStorage.getItem('savedData')) || [];

  // 追加新数据到数组
  storedData.push(newData);

  // 保存更新后的数据到LocalStorage
  localStorage.setItem('savedData', JSON.stringify(storedData));

  // 调用渲染函数更新表格
  renderTable(storedData);
});

// 渲染表格的函数
function renderTable(data) {
  // 先清空表格现有内容（可选，避免重复渲染）
  tableBody.innerHTML = '';

  // 遍历数据生成表格行
  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item['data-id']}</td>
      <td>${item['data-nama']}</td>
      <td><a href="${item['data-link']}" target="_blank">访问链接</a></td>
    `;
    // 追加到表格tbody
    tableBody.append(row);
  });
}

// 页面加载时自动渲染已有数据
document.addEventListener('DOMContentLoaded', function() {
  const storedData = JSON.parse(localStorage.getItem('savedData')) || [];
  renderTable(storedData);
});

关键注意事项 #

• LocalStorage存储限制：LocalStorage只能存储字符串，因此必须用JSON.stringify()将数组转为字符串，读取时用JSON.parse()转回JS对象。
• 自定义属性获取：也可以用this.dataset.nama替代getAttribute('data-nama')，前者是HTML5标准的dataset API，写法更简洁。
• 初始值处理：读取LocalStorage时要判断是否为空，否则第一次读取会得到null，用|| []初始化为空数组可避免报错。
• 重复数据处理：如果需要避免添加重复数据，可在push前判断数组中是否已有相同data-id的项，示例判断逻辑：storedData.some(item => item['data-id'] === dataId)。

内容的提问来源于stack exchange，提问作者zet.io