Javascript: 我可以使用 JS 将 HTML 元素从一个页面复制到另一个页面吗？

Question

JS 新手。研究了下没找到好的解决办法，看来应该不会太复杂。

假设我有一个名为 page1.html 的页面，代码如下：

<div class="page1">
  <div class="wrapper">
    <p>Some text.</p>
  </div>
</div>

现在，我有第二页，page2.html，代码如下：

<div class="page2">
</div>

我想用 page1.html 中的 class wrapper 复制 div，并将其插入 page2.html，在 div 与 class page2.

两个页面共享同一个 script.js 文件。

我试过这样的事情：

page1content = document.querySelector('.wrapper');
page2content = document.querySelector('.page2');
page2content.append(page1content);

但是，我在 page1.html 上遇到错误，因为 js 找不到 div 和 class page2，并且我在 page1.html 上遇到错误page2.html 因为js找不到div with class wrapper.

我发现了一个类似的问题 here，一些评论建议使用 localStorage。

我对 localStorage 不熟悉，所以我试着做了一些研究，并尝试了这样的事情：

在 page1.html 我在底部插入了这个脚本：

<script>
  var pageContent = document.querySelector(".page1").innerHTML; 
  sessionStorage.setItem("page1content", pageContent);
</script>

在 page2.html 我在底部插入了这个脚本：

<script>
  document.querySelector(".page2").innerHTML=sessionStorage.getItem("page1content");
</script>

对我没用，可能是我用错了。

我也尝试使用 cloneNode()，但同样，我不确定如何将元素的克隆移植到新页面上，只能移植到我正在克隆的同一页面上。

还有其他方法可以完成我想做的事情吗？

显然这是一个非常基本的例子；我的实际代码将从第 1 页到第 2 页添加更多内容，但我只想让这个概念至少发挥作用。

Answer 1

描述中示例中的代码几乎是正确的，我只需要将 sessionStorage 更改为 localStorage 就可以了。

Javascript: Can I Use JS to Copy an HTML Element From One Page to Another?