时间戳

首页 > 解决方案 > 尝试将来自不同 html 页面的信息保存到一个数组中，然后将它们显示在另一个 html 页面中

javascript - 尝试将来自不同 html 页面的信息保存到一个数组中，然后将它们显示在另一个 html 页面中

问题描述

我正在尝试制作一个假服装品牌网站，我想从用户想要的列表中获取用户输入，然后将它们显示在购物车 html 页面中。

选择页面之一的代码是这样的：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <title> Bison Brand Shirts </title>
    <link rel="shortcut icon" href="bison_brand_logo.png" type="image/png">
    <link rel="stylesheet" type="text/css" href="bison_brand_style.css">
</head>

<script type="text/javascript" src="bison_brand.js"></script>

<div class="outer">
    <div class ="inner"> 
        <img src="bison_silo.png" alt="bison" width="122.857142857" height="80.5714285714">
    </div>
</div>
<div id="result"></div>

<body>

    <h1 > shirts </h1>  
    
    <img src="bison_brand_light_grey_t-shirt.png" width="200px" height="200px">
    
    <p>price: $30<p>
    
    <label for="size">size:</label>
    <select name="product" id="product">
        <option value="shirt_small">small</option>
        <option value="shirt_medium">medium</option>
        <option value="shirt_large">large</option>
        <option value="shirt_xlarge">xlarge</option>
    </select>
        <span class="output"></span>
    <button onclick="addCart(); getCart()"> add to cart </button>
    <h2> <a href="bison_brand_home.html">home</a> <a href="bison_brand_cart.html">cart</a></h2>
    
</body>
</html>

我的javascript代码是这样的：

console.log("here");
var cart = [];
var input;
function addCart() {
        selectElement = document.querySelector('#product');     
        output = selectElement.value;
        console.log("cart:");
        cart.push(output);
        console.log(cart);
        localStorage.setItem("cart", JSON.stringify(cart));
}

function getCart() {
        alert(cart);
}

我的购物车 html 代码如下所示：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <title> Bison Brand Cart </title>
    <link rel="shortcut icon" href="bison_brand_logo.png" type="image/png">
</head>
<div id="result"></div>
<script type="text/javascript" src="bison_brand.js" ></script>
<style>
    body{
        background: #E38F66;
    }
    h1{
        text-align: center;
        font-size: 75px;
        font-family: "Courier New";
    }
    h2{
        text-align: center;
        font-size: 50px;
        font-family: "Courier New"; 
    }
</style>
<body onload="getCart()">
    <h1 > Cart </h1>    
    <h2> <a href="bison_brand_home.html">home</a></h2>
</body>
</html>

任何提示或想法都会很棒。我从未使用过 PHP，但我愿意尝试。

标签： javascriptphphtmlcss

解决方案

推荐阅读