如何从localStorage读取数据并在HTML表格中展示

Alright, let's work through this together to turn your localStorage cart data into the table structure you need. First, I notice a tiny syntax error in your stored cart string — the second book entry has an extra opening curly brace { that will break JSON parsing. We'll fix that first, then walk through the rest step by step.

步骤1：获取并解析localStorage数据 #

First, we'll pull the cart string from localStorage, fix the syntax issue, then convert it into a usable JavaScript array with JSON.parse():

// 从localStorage获取原始购物车字符串
const cartString = localStorage.getItem('cart');
// 修复语法错误：移除第二个书籍对象前多余的{
const fixedCartString = cartString.replace('{{"Author"', '{"Author"');
// 将修正后的字符串解析为JS数组
const cartItems = JSON.parse(fixedCartString);

步骤2：动态生成目标HTML表格 #

Next, we'll build the table HTML structure dynamically. We'll start with the base table skeleton, then loop through each book in the parsed array to add rows with the exact classes you specified:

function buildCartTable(items) {
  // 初始化表格基础结构
  let tableHtml = `
    <table border="1">
      <tbody>
        <tr>
          <th> Book Title </th>
          <th> Author </th>
        </tr>
  `;

  // 遍历每本书，生成对应的表格行
  items.forEach(item => {
    tableHtml += `
      <tr>
        <td class="Book_Title">${item.title.trim()}</td>
        <td class="Author">${item.Author.trim()}</td>
      </tr>
    `;
  });

  // 闭合表格标签
  tableHtml += `
      </tbody>
    </table>
  `;

  return tableHtml;
}

// 将生成的表格插入到页面指定容器中（比如id为cartTable的元素）
const tableContainer = document.getElementById('cartTable');
if (tableContainer) {
  tableContainer.innerHTML = buildCartTable(cartItems);
}

完整可运行示例 #

Add this code to your HTML file to see it in action:

<!-- 用于承载表格的容器 -->
<div id="cartTable"></div>

<script>
// 从localStorage获取并解析数据
const cartString = localStorage.getItem('cart');
const fixedCartString = cartString.replace('{{"Author"', '{"Author"');
const cartItems = JSON.parse(fixedCartString);

// 生成表格的函数
function buildCartTable(items) {
  let tableHtml = `
    <table border="1">
      <tbody>
        <tr>
          <th> Book Title </th>
          <th> Author </th>
        </tr>
  `;

  items.forEach(item => {
    tableHtml += `
      <tr>
        <td class="Book_Title">${item.title.trim()}</td>
        <td class="Author">${item.Author.trim()}</td>
      </tr>
    `;
  });

  tableHtml += `
      </tbody>
    </table>
  `;

  return tableHtml;
}

// 渲染表格到页面
const tableContainer = document.getElementById('cartTable');
if (tableContainer) {
  tableContainer.innerHTML = buildCartTable(cartItems);
}
</script>

关键细节说明 #

• JSON语法修复：原始存储的字符串里有{"Author":"Micheal Grant","title":"Gone"},{{"Author"...这样的错误格式，连续两个{是无效JSON，所以我们用replace()去掉多余的那个，确保JSON.parse()能正常执行。
• 动态行生成：通过遍历数组，我们可以自动适配购物车中任意数量的书籍，不用手动编写每一行代码。
• 类名匹配：每个数据单元格都严格按照示例要求添加了Book_Title和Author类，完全符合你需要的结构。

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