因此，我有一个主页，其中包含指向不同产品的图像链接。这些产品是鞋子。它们实际上并不存在。我正在将虚构的电子商务网站的前端作为个人项目。我为此项目使用html，css和纯javascript。每个链接都包含一个产品页面，您可以在其中单击一个按钮来购买产品。它还具有图像，名称和lorem ipsum来进行描述。
“购买”按钮链接到结帐页面。我想知道当我单击“购买”按钮时如何在此结帐页面上显示产品的图像。我希望结帐页面显示购买的产品的特定图像，而不是让多个结帐页面显示其他产品的不同图像。因此，如果您在第一个产品上单击“立即购买”，并且如果我选择购买第二个产品，则应该在结帐页面上显示该产品的图片。
/* Grid */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
position: relative;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
float: left;
padding: 15px;
}
.row::after {
content: "";
clear: both;
display: table;
}
/* Media Queries */
/* For mobile phones: */
@media only screen and (max-width: 600px) {
[class*="col-"] {
width: 100%;
}
}
/* For desktop: */
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
/* Extra small devices (phones, 600px and down) */
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #363636;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: 'Lato', sans-serif;
}
.topnav a:hover {
border-style: solid;
border-width: thin;
border-color: gainsboro;
color: black;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
/* */
#cart {
float: right;
font-size: 30px;
color: #363636;
padding: 10px;
margin-left: 30px;
}
#cart:hover {
border-style: solid;
border-width: thin;
border-color: gainsboro;
}
#search-bar {
width: 50%;
padding: 10px;
border-radius: 10px;
border: 1px solid #d9d9d9;
box-shadow: 1px 2px 3px #bfbfbf;
}
#search-button {
text-decoration: none;
color: white;
background-color: skyblue;
padding: 10px;
width: 70px;
border-radius: 10px;
box-shadow: 1px 2px 3px #bfbfbf;
}
#search-button:hover {
cursor: pointer;
}
img {
width: 100%;
border: 1px solid #e6e6e6;
border-radius: 10px;
box-shadow: 1px 2px 3px #bfbfbf;
}
.name-and-price {
font-family: 'Lato', sans-serif;
}
.login-signup {
font-family: 'Lato', sans-serif;
float: right;
}
.login-signup a {
text-decoration: none;
}
#buy-section {
border: 1px solid #e6e6e6;
border-radius: 5px;
width: 150px;
height: 200px;
}
#footer {
margin-top: 20%;
text-align: center;
}
.action-buttons {
padding: 15px;
width: 70%;
margin-left: 21px;
margin-top: 10px;
border-radius: 5px;
}
.action-buttons:hover {
cursor: pointer;
}
#buy-button {
background-color: orangered;
color: #ffffff;
}
#cart-button {
background-color: #f6f6f6;
}
#save-button {
background-color: lightgray;
}<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<div class="container">
<div class="row">
<div class="col-6">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="col-6">
<a href="#"><i id="cart" class="fas fa-shopping-cart"></i></a><p class="login-signup"><a href="#">Login</a> or <a href="#">Sign up</a></p>
</div>
</div>
</div>
<!-- Searchbar -->
<div class="container">
<div class="row">
<div class="col-12">
<input id="search-bar" type="text" placeholder="Type something...">
<button id="search-button">Search</button>
</div>
</div>
</div>
<!-- Product -->
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/shoes1.jpeg" alt="Shoes">
<p class="name-and-price">Black and white nike running shoes <br>$90.00</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus turpis a erat vehicula, sed molestie leo aliquet.</p>
</div>
<div class="col-6">
<!-- buy section -->
<div id="buy-section">
<a href="checkout.html"><button class="action-buttons" id="buy-button">Buy Now</button></a>
<button class="action-buttons" id="cart-button">Add to Cart</button>
<button class="action-buttons" id="save-button">Save for Later</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="container" id="footer">
<div class="row">
<div class="col-12">
<footer>Copyright © 2019</footer>
</div>
</div>
</div>
<script src="js/functionality.js"></script>
</body>
</html>
答案 0 :(得分：0)
您必须将产品详细信息保存在MySQL（DBMS-数据库管理系统）之类的数据库中，并且需要使用服务器端脚本语言（如PHP，Java，NodeJS等）来检索数据库详细信息。
否则，您需要在本地存储中保留产品ID和产品映像的路径。如果您在多个标签中打开同一产品，这将非常复杂。 -使用第一种方法-。
您可以选择以下方法之一。我认为您不需要使用第二种方法。 对于像在线商店这样的项目，您应该使用后端技术。服务器端脚本和数据库管理系统。
数据库是存储所有产品信息和诸如填充之类的用户信息的地方。
答案 1 :(得分：0)
您好，Alexander欢迎来到StackOverflow。
您可以将产品的图像链接保存在localStorage上。 localStorage使数据保持全局，并且可用于同一域的所有页面。如果您不想使用localStorage，则可以使用WebSql，IndexedDB或MySql等服务器端DBMS。
如果您选择在浏览器中保留应用程序的状态数据，请考虑使用LocalForage。
如果您选择在浏览器中保留应用程序的状态数据，请考虑使用LocalForage。
下面是使用localStorage的单个示例。
/* On home page */
var product = {
name: "Some name",
price: 1.75,
description: "description",
image: "https://picsum.photos/375"
}
function buttonClick() {
console.log("Saving on localStorage");
localStorage.setItem("selectedProduct", JSON.stringify(product) );
}
/* on any other page */
function getSelectedProduct() {
console.log("Recovering data")
var product = JSON.parse(localStorage.getItem("selectedProduct"));
console.log(product)
}
/* MOCK test */
buttonClick();
getSelectedProduct();