将HTML Table存入localStorage时返回undefined问题咨询

你遇到的存储后读取为undefined的问题，90%以上是代码执行时机错误导致的：

• 你要抓取的#summary-table是动态生成的内容：一方面它需要用户完成配置选择后才会被渲染填充，另一方面它位于最后一个标签页内，绝大多数Tab组件会对非激活标签做懒加载处理——也就是你没切换到汇总标签页、没点「view summary」按钮跳转的时候，这个表格节点根本不存在于当前DOM树中。
• 你当前的代码没有做元素存在性判断，直接调用$('#summary-table').html()，当选择器匹配不到任何元素时，jQuery对象调用.html()返回值就是undefined，你把undefined存入localStorage，读出来自然也是undefined。
• 在线测试环境运行正常是因为你测试时已经把表格HTML提前写入了DOM，或者等表格渲染完成后才执行代码，不存在节点缺失的问题。

如果确认执行时DOM里已经存在#summary-table节点，再排查以下问题：

• 站点配置了权限策略禁用localStorage：在控制台手动执行localStorage.setItem('test','123')，如果抛出SecurityError，说明站点设置了禁止本地存储的规则，或是你浏览器给该站点开了隐私限制、阻止了数据存储。
• 代码执行上下文不对：如果你是在页面内嵌的第三方iframe的控制台环境跑代码，iframe源和主站不同源，localStorage是同源隔离的，你存值的位置和你读值的位置不属于同一个源，自然读不到内容。
• 站点覆写了原生localStorage方法：部分站点为了合规或者数据防爬，会重写setItem/getItem方法，导致原生存储逻辑失效。

不要在页面加载时直接执行抓取存储逻辑，改成等表格渲染完成后再执行，最稳妥的方式是把逻辑绑定到「view summary」按钮的点击回调中，同时加元素存在校验：

// 绑定到view summary按钮点击事件，等表格渲染后再抓取内容
$('#view-summary-btn').on('click', () => {
  // 加短延时等DOM插入完成
  setTimeout(() => {
    const $tableEl = $('#summary-table');
    if (!$tableEl.length) {
      console.warn('汇总表格未找到，请稍后重试');
      return;
    }
    const tableCopy = $tableEl.html();
    localStorage.setItem('table', tableCopy);
    console.log('存储成功，读取结果：', localStorage.getItem('table'));
  }, 100)
})

内容的提问来源于stack exchange，提问作者jQuery-Student1989