如何使用 JavaScript 等待一个页面上的点击，然后将数据存储在带有对象的数组中的数据以在另一个页面上显示其内容

Question

我正在构建的网站将有两个单独的页面。一个页面将用作带有链接的服务库，另一个页面用于通过JavaScript上传从服务库中选择的内容。JavaScript有一个带有对象的数组。对象中的内容将通过它选择的元素加载到另一个页面上。因此，如果用户想了解更多关于服务的信息，他们会点击链接，事件监听器会监听点击。然后脚本将检查选择了什么服务，并加载特定于该服务的数据交换机。另一个页面将有div，javascript将使用div来附加创建的元素。在我的代码中，我不知道下一步该做什么。。。因此，我正在联系stackoverflow，希望能找到一个已经完成这项工作的人。我还将发布部分代码以帮助理解我的问题。

JavaScript：

请注意，我使用事件对象来阻止锚点标记的默认操作，这样我就可以看到在DOM上选择了什么元素。我还删除了创建的元素，并放入console.log((来运行一些bug测试。。。

(function () {
// DYNAMIC PAGE LOADING FOR PAGE DESCRIPTION
const description = [
{
page: "garden",
hero: "GARDEN",
title: "Garden Care",
title_para: "this will be some dummy text for now",
title_image: "../asset/img/img1.jpg",
icon: "",
links: {},
sideImage1: "",
sideBox1: "",
sideImage2: "",
sideBox2: "",
mainTitle: "",
mainPara1: "",
mainPara2: "",
mainImage1: "",
mainImage2: "",
mainImage3: "",
sub_mainTitle: "",
sub_mainPara1: "",
sub_mainPara2: "",
sub_mainImage1: "",
sub_mainImage2: "",
sub_mainImage3: ""
},
]
let serviceDescription = document.getElementsByClassName("service-description");
for (let i = 0; i < serviceDescription.length; i++) {
serviceDescription[i].addEventListener("click", function (e) {
e.preventDefault();
if (serviceDescription[i] == serviceDescription[0]) {
let elHeading = document.getElementById("hero-text");
console.log(elHeading);
}
}, false);
}
}());

html

<!-- this page is the service gallery and each link listens for a click -->
<div class="service-gallery-container">
<div class="service-gallery-card">
<a href="description.php" class="service-description">
<div class="service-gallery-image-box service-gallery-image-1"></div>
</a>
<h2 class="font-green">GARDEN</h2>
<p>Lean more about our garden servies</p>
</div><!-- end of servcie card 1 -->
<div class="service-gallery-card">
<a href="description.php" class="service-description">
<div class="service-gallery-image-box service-gallery-image-2"></div>
</a>
<h2 class="font-green">LAWN</h2>
<p>Lean more about our lawn servies</p>
</div><!-- end of servcie card 2 -->
</div>
<!-- this page is the template that JavaScript will use to load in the content from the object -->
<section class="description-path hero">
<div class="container">
<div class="hero-content">
<h1 id="hero-text" class="hero-text">Description</h1>
</div>
</div>
</section>
<!-- end of description path hero -->
<section class="description-heading">
<div class="container">
<div id="description-title"></div>
<div id="description-image"></div>
</div>
</section>
<!-- end of description heading -->

我希望这能有所帮助，如果你需要更多信息，请告诉我。。。

Answer 1

如果您想在页面之间共享数组、对象和任何类型的数据，我建议使用带有JSON的localStorage来字符串和解析数据。

例如：

// you currently at page www.sitename.com/
// the data you want to take to the other page, for this example I use array but as I say you can use whatever you need
let array = ["item1", "item2", "item3"];
// now we need to convert 'array' to normal string so we can save it inside 'localStorage'
// we will do this using JSON.stringify
let stringArray = JSON.stringify(array);
// now we ready to save the data inside localStorage
localStorage.setItem("myArray", stringArray);

在这一步之后，假设客户现在转到"www.sitename.com/product"：

// get the data we stored inside localStorage
let data = localStorage.getItem("myArray");
// now we need to convert our data to normal js array
let normalArray = JSON.pars(data);
// now you ready to use your array and do whatever you want
console.log(normarArray[0]) // output 'item1'

请小心不要使用这种方法存储任何敏感信息，如客户的密码或信用卡，因为任何人都可以很容易地访问这些数据。