复制 HTML Table 到 localStorage

Question

我有一个 table 是通过 javascript 应用程序自动生成的。

在此处查看测试站点：https://hhpricetools.com/3d-wood-designer/

摘要 table 在最后一个选项卡上，或者您可以单击顶部的“查看摘要”来查看摘要。

根据用户选择填充的 table 如下所示：

<table id="summary-table" class="hhpt-summarytable"><tbody>
<tr><td>Style:  <b>Side Lofted Barn</b></td>
<td> </td></tr>
<tr><td>Size:  <b>10' x 16'</b></td><td> </td></tr>
<tr><td>Siding:  <b>LP Smartside - Painted</b></td><td> </td></tr>
<tr><td>Wall Color:  <b>Quest Gray #7080</b></td><td> </td></tr>
<tr><td>Trim Color:  <b>White</b></td><td> </td></tr>
<tr><td>Roof:  <b>Radiant Barrier LP Techshield</b></td><td> </td></tr><tr><td>
</td></tr></tbody></table>

我想保存到 localStorage。出于某种原因，我在上面的实际网站上得到“未定义”。不过，jsfiddle 工作正常。为什么它在网站上不这样做？

var table_copy = $('#summary-table').html();
    localStorage.setItem('table',table_copy);
    console.log(localStorage.getItem("table"));

https://jsfiddle.net/ebryjz1q/

Answer 1

在尝试存储 HTML 之前，您需要确保 DOM 已完全加载。

尝试以下操作：

$('document').ready(function() {
    var table_copy = $('#summary-table').html();
    localStorage.setItem('table',table_copy);
    console.log(localStorage.getItem("table"));
});

Answer 2

有几种方法可以确保您的 JavaScript 在 DOM/HTML 加载之后加载。

1.使用 defer

您可以在 HTML 加载后使用 defer 加载 JavaScript。

为此，您只需添加以下属性即可。

<script defer src="index.js"></script>

这应该等到 DOM 加载完毕，然后再实际加载 JavaScript。

2。将 <script> 添加到 <body>

另一种解决方案是将script 标记添加到body 的末尾。这将使 JavaScript 代码在所有 HTML 加载之后加载。

3。等待 JavaScript

您也可以等待 DOM 在 JavaScript 中加载（没有 JQuery）。

有两种方法。

您可以使用 DOMContentLoaded 事件侦听器。这将等到 HTML 加载完毕。但是，它不会等待图像、样式表等的加载。

要使用它，您可以使用 addEventListener()。
```
window.addEventListener("DOMContentLoaded", () => {
  // Code here will execute only after the DOM has loaded...
});
```
您还可以使用 load 事件，它将在 HTML 加载后加载，以及图像、样式表等

您也可以将此侦听器与 addEventListener 一起使用。
```
window.addEventListener("load", () => {
  // Code here will execute after everything has loaded...
});
```
您可以使用 onload 事件处理程序执行相同的操作属性。
```
window.onload = () => {
  // Code here will execute after everything has loaded...
};
```

总而言之，有很多方法可以让 JavaScript 等到 DOM 加载完毕。

复制 HTML Table 到 localStorage

Copy HTML Table to localStorage

javascript

html

local-storage