我有一个包含多个 div 的页面，每个 div 都有一张猫的照片以及一些文本和其他信息（用于猫收养机构页面）。每个 div 都有一个 onclick，它调用 JavaScript 函数，然后转移到不同的页面（从有很多猫的页面到只有一只猫的页面）。
我尝试了多种方法将点击的div移动到新页面但仍然不成功。我目前正在进行 2 个调用，其中一个是当用户单击 cat pic 时，这会将 div 保存到本地存储，然后当加载新页面时，会调用第二个函数来尝试读取该 div 并将其附加到新页面中。这是相关的代码片段。
function loadCatProfile() {
var cat = localStorage.getItem("catProfile");
var mydoc = document.getElementById("placeholder");
mydoc.append(cat);
}
function saveCatProfile(profile) {
localStorage.setItem("catProfile", profile);
window.location.href = "/singlecat.html";
}
用户点击的多猫页面....
<!DOCTYPE html>
<html>
<head>
<script src="/core/jscript.js"></script>
</head>
<body>
<div class="profile" onclick="saveCatProfile(this)" style="cursor: pointer">
<img src="/images/martin.webp" < />
<p>Martin</p>
<p>8 meses</p>
</div>
<div class="profile" onclick="saveCatProfile(this)" style="cursor: pointer">
<img class="cat-image" src="/images/vimes.webp" < />
<p id="cat-name">Sir Vimes</p>
<p class="cat-age">8 meses</p>
</div>
</body>
</html>
尝试阅读的新单猫页面
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/core/jscript.js"></script>
</head>
<body>
<main>
<div id="placeholder">
<p>test</p>
</div>
</main>
<script>
loadCatProfile();
</script>
</body>
</html>
尝试保存然后将保存的数据分配给目标页面的innerHTML，尝试将保存的div附加为子项，阅读了太多接近帮助但不成功的网页。这是一个纯 html/css javascript 网站，没有框架或其他库。
将单击的 div 保存到 localStorage 的方法可以工作，但问题在于如何检索元素。当您将整个 div 保存到 localStorage 时，它会存储为字符串。然而，直接附加这个字符串是行不通的，因为它不是一个 DOM 元素。
所以基本上你需要将div的内部HTML保存到localStorage，然后 在目标页面上重建它。
当您将项目设置/保存到本地存储时，您需要保存内部 HTML 而不是 div。
function saveCatProfile(profile) {
localStorage.setItem("catProfile", profile.innerHTML);
window.location.href = "/singlecat.html";
}
之后，您可以通过创建此类函数来访问已保存的组件。
function loadCatProfile() {
var anyName= localStorage.getItem("catProfile");
if(anyName)
{
}
else
{
}}