求助：如何将Web应用中的动态表格数据按条目存储至LocalStorage以实现跨页复用？

我来帮你搞定这个问题！要实现把动态表格的每条记录单独存在LocalStorage里，方便其他页面复用，咱们可以按下面的思路和代码来实现：

核心思路 #

• 给每条表格记录分配一个唯一ID，作为LocalStorage里的存储键（避免重复）
• 同步表格的增/删/改操作到LocalStorage：
  • 新增行：把行数据转成对象，用唯一ID作为键存入LocalStorage
  • 修改输入内容：实时更新对应ID的LocalStorage记录
  • 删除行：同时删除DOM元素和LocalStorage里的对应记录
• 页面加载时，从LocalStorage读取所有记录，自动渲染成表格行

完整实现代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="well clearfix">
  <a class="btn btn-primary pull-right add-record_alg" data-added="0"><i class="glyphicon glyphicon-plus"></i> Toevoegen </a>
</div>
<div class="container-fluid" style="margin-left:1px ;">
  <form enctype="multipart/form-data">
    <table class="table table-stripped" id="tbl_posts_alg">
      <thead style="background-color:#c7c8cc;">
        <tr>
          <th style="width: 100px ;">Nummer</th>
          <th style="width: 350px;">Naam</th>
          <th>Gebruiksfunctie</th>
          <th>Gebruiksoppervlakte [m2]</th>
          <th style="width: 111px;">Verwijderen</th>
        </tr>
      </thead>
      <tbody id="tbl_posts_body_alg">
        <!-- 初始化时会从LocalStorage加载数据，这里不需要默认行 -->
      </tbody>
    </table>
  </form>
</div>
<div style="display:none;">
  <table id="sample_table_alg">
    <tr>
      <td><input class="inputtext" type="text" name="nummer" placeholder="Nummer"></td>
      <td><input class="inputtext" type="text" name="naam" placeholder="Naam"></td>
      <td>
        <select class="functiedropdown" name="functie">
          <option value="">selecteer een functie!</option>
          <option value="verkeersruimte">verkeersruimte</option>
          <option value="meterruimte">meterruimte</option>
          <option value="toiletruimte">toiletruimte</option>
          <option value="verblijfsruimte">verblijfsruimte</option>
          <option value="techniekruimte">techniekruimte</option>
          <option value="bergruimte">bergruimte</option>
          <option value="wasruimte">wasruimte</option>
          <option value="badruimte">badruimte</option>
          <option value="onbenoemde ruimte">onbenoemde ruimte</option>
        </select>
      </td>
      <td><input class="inputtext" type="text" name="oppervlakte" placeholder="[m2]"></td>
      <td><a class="btn btn-xs delete-record_alg"><i class="glyphicon glyphicon-trash"></i></a></td>
    </tr>
  </table>
</div>

<script>
// 生成唯一记录ID
function generateUniqueId() {
  return 'rec_alg_' + Date.now() + Math.floor(Math.random() * 1000);
}

// 从行元素提取数据对象
function getRowData($row) {
  return {
    nummer: $row.find('input[name="nummer"]').val().trim(),
    naam: $row.find('input[name="naam"]').val().trim(),
    functie: $row.find('select[name="functie"]').val(),
    oppervlakte: $row.find('input[name="oppervlakte"]').val().trim()
  };
}

// 保存行数据到LocalStorage
function saveRowToLocalStorage(rowId, data) {
  localStorage.setItem(rowId, JSON.stringify(data));
}

// 从LocalStorage删除行数据
function deleteRowFromLocalStorage(rowId) {
  localStorage.removeItem(rowId);
}

// 渲染单条记录到表格
function renderRowToTable(rowId, data) {
  var $content = jQuery('#sample_table_alg tr');
  var $element = $content.clone();
  var rowIndex = jQuery('#tbl_posts_body_alg > tr').length + 1;

  // 设置行ID
  $element.attr('id', rowId);
  // 填充数据
  $element.find('input[name="nummer"]').val(data.nummer);
  $element.find('input[name="naam"]').val(data.naam);
  $element.find('select[name="functie"]').val(data.functie);
  $element.find('input[name="oppervlakte"]').val(data.oppervlakte);
  // 设置序号
  $element.prepend(`<td><span class="sn">${rowIndex}</span></td>`);
  // 添加到表格
  $element.appendTo('#tbl_posts_body_alg');

  // 绑定输入变化事件，实时更新LocalStorage
  $element.find('input, select').on('change input', function() {
    var updatedData = getRowData($element);
    saveRowToLocalStorage(rowId, updatedData);
  });
}

// 页面初始化：加载LocalStorage中的所有记录
function initTableFromLocalStorage() {
  // 遍历LocalStorage的所有键
  for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    // 只处理我们的表格记录键
    if (key.startsWith('rec_alg_')) {
      var data = JSON.parse(localStorage.getItem(key));
      renderRowToTable(key, data);
    }
  }
  // 如果没有记录，添加一条空行
  if (jQuery('#tbl_posts_body_alg > tr').length === 0) {
    addNewRow();
  }
}

// 添加新行的逻辑
function addNewRow() {
  var rowId = generateUniqueId();
  var $content = jQuery('#sample_table_alg tr');
  var $element = $content.clone();
  var rowIndex = jQuery('#tbl_posts_body_alg > tr').length + 1;

  $element.attr('id', rowId);
  // 新增序号列
  $element.prepend(`<td><span class="sn">${rowIndex}</span></td>`);
  $element.appendTo('#tbl_posts_body_alg');

  // 绑定输入变化事件
  $element.find('input, select').on('change input', function() {
    var data = getRowData($element);
    saveRowToLocalStorage(rowId, data);
  });

  // 初始保存空数据
  saveRowToLocalStorage(rowId, getRowData($element));
}

// 删除行的逻辑
jQuery(document).delegate('a.delete-record_alg', 'click', function(e) {
  e.preventDefault();
  var didConfirm = confirm("Ruimte verwijderen?");
  if (didConfirm) {
    var $row = jQuery(this).closest('tr');
    var rowId = $row.attr('id');
    // 删除DOM元素
    $row.remove();
    // 删除LocalStorage记录
    deleteRowFromLocalStorage(rowId);
    // 重新生成序号
    $('#tbl_posts_body_alg tr').each(function(index) {
      $(this).find('span.sn').html(index + 1);
    });
    return true;
  } else {
    return false;
  }
});

// 添加行按钮事件
jQuery(document).delegate('a.add-record_alg', 'click', function(e) {
  e.preventDefault();
  addNewRow();
});

// 页面加载完成后初始化表格
jQuery(document).ready(function() {
  initTableFromLocalStorage();
});
</script>

关键改动说明 #

1. 唯一ID生成：用Date.now()加随机数生成唯一的记录ID，确保每条记录在LocalStorage里的键不重复
2. 数据同步逻辑：
   • 输入框/下拉框内容变化时，实时提取行数据并更新到LocalStorage
   • 删除行时同时删除LocalStorage中的对应记录
3. 页面初始化：加载页面时自动读取LocalStorage里的所有记录，渲染成表格行；如果没有记录则自动添加一条空行
4. 结构优化：给表单控件加上了name属性，方便提取数据；移除了默认的硬编码行，改为动态加载

其他页面复用数据的方法 #

在其他页面，你可以用类似的方式读取LocalStorage的记录：

// 获取所有表格记录
function getAllTableRecords() {
  var records = [];
  for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    if (key.startsWith('rec_alg_')) {
      records.push({
        id: key,
        data: JSON.parse(localStorage.getItem(key))
      });
    }
  }
  return records;
}

// 使用示例
var allRecords = getAllTableRecords();
console.log(allRecords); // 输出所有记录的数组，每条包含id和数据对象

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