把当前页面内容 传到 另一个页面 方式有以下
方法一:把内容通过 链接 的形式来传递 ( 注意内容比较短的时候可以使用:)
(1)当前页面链接是xx.com/01.html: 代码如下:
<div class="title">产品001</div>
<div class="width">66px</div>
<div class="cursor-p" id="OrdeSubmit">Orde Submit</div>
<script>
document.getElementById("OrdeSubmit").addEventListener("click", function() {
var quotetitle = document.querySelector(".title").textContent.trim();
var quotewidth = document.querySelector(".width").textContent.trim();
var BuyDataUrl = `https://xx.com/02buy?title=${encodeURIComponent(quotetitle)}&width=${encodeURIComponent(quotewidth)}`;
window.location.href = BuyDataUrl;
})
</script>
( 2)页面跳转后的页面xx.com/02buy.html,接受时代码如下:
<div class="cs-list cp-title"></div>
<div class="cs-list">width: <span class="cp-width"></span></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 获取 URL 参数
var params = new URLSearchParams(window.location.search); //内容接受
var quote = params.get("title"); // 获取 'quote' 参数的值
var width = params.get("width"); // 获取 'quote' 参数的值
// 如果参数存在,则填充到 .cp-title
if (quote) {
document.querySelector(".cp-title").textContent = decodeURIComponent(quote);
document.querySelector(".cp-width").textContent = decodeURIComponent(width);
}
})
</script>
方法二:用 localStorage 传递数据递
( 如果 URL 里不方便放太多数据,可以用 localStorage 存数据,在详情页读取。)
(1)当前页面链接是xx.com/01.html: 代码如下:
<div class="title">
<div class="text-box">
<p calss="text-t">标题会尽快哈士大夫艰苦户籍科 <img src="icon" alt="标题图标"></p>
<p calss="text-des">简短文本 标题会尽快哈士大夫艰苦户籍科</p>
</div>
</div>
<div class="width title2">
<div class="text-box">
<p calss="text-t">标题会尽快哈士大夫艰苦户籍科 <img src="icon" alt="标题图标"></p>
<p calss="text-des">简短文本 标题会尽快哈士大夫艰苦户籍科</p>
</div>
</div>
<div class="cursor-p" id="OrdeSubmit">Orde Submit</div>
<script>
document.getElementById("OrdeSubmit").addEventListener("click", function() {
var title = document.querySelector(".title").innerHTML;
var title2 = document.querySelector(".title2").innerHTML;
let packageData = {
titlehtml: title,
title2html: title2,
};
localStorage.setItem("packageData", JSON.stringify(packageData));
window.location.href = "https://xx.com/02buy.html";
})
</script>
( 2)页面跳转后的页面xx.com/02buy.html,接受时代码如下:
<div class="title-data"></div>
<div class="title2-data"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// 获取 URL 参数
let packageData = JSON.parse(localStorage.getItem("packageData"));
if (packageData) {
console.log("数据:", packageData);
// 直接从 packageData 获取数据,而不是用 params.get()
let titlehtmlnr = packageData.titlehtml;
let title2htmlnr = packageData.title2html;
// 插入到页面里
document.querySelector(".title-data").innerHTML = titlehtmlnr;
document.querySelector(".title2-data").innerHTML = title2htmlnr;
}
})
</script>