使用 javascript 在页面之间传输 table 数据

Question

我创建了一个表单，要求用户 select 从下拉列表中选择一个选项并从数字输入中输入一个数量。使用 javascript 我计算了几个不同的值并将它们放在新的 table 中。我想让用户单击一个提交按钮，该按钮会将用户带到一个新页面，该页面将显示相同的 productCart table 计算值。单击按钮后，如何将新值传输回此新页面上的 table。我已经将 tables html 复制并粘贴到新页面中我只是不知道如何将计算值从一个页面转移到另一个页面。

这是我的 html

<!DOCTYPE html>
<html lang="en">
<head>
<title>ABC Games</title>
    <meta charset="utf-8" />
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles/reset.css" rel="stylesheet" type="text/css" />
    <script src="products.js" async></script>
</head>
<header>
    <a href="index.html"><img class="topImg" src="images/dice.png" alt="Dice"/></a>
    <a href="index.html"><img class="topImg2" src="images/dice.png" alt="Dice"/></a>
<div class="centerText">
<span class="multicolortext">ABC Games</span>
</div>
<nav>
<ul class="topnav1">
<li><a class="topnav2" href="buyProducts.html" >Buy Products</a></li>
<li><a class="topnav2" href="confirmProducts.html" >Confirm Products</a></li>
<li><a class="topnav2" href="playGame.html" >Play Game</a></li>
</ul>
</nav>
</header>
<body>
    <section>
    <form name="productsCart" id="productsCart" method="post" action="confirmProducts.html">
    <div class="row">
    <div class="column">
    <table id="productSelect">
            <tr>
            <th id="purchaseDate"><span id="date-time"></span>
    <script>
        var dt = new Date();
        document.getElementById("date-time").innerHTML=dt.toDateString();
    </script></th>
            </tr>
            <tr>
                <th>Product Select</th>
                <th>Quantity Select</th>
                <th>Product Cost</th>
            </tr>
            <tr>
                <td>
                    <select id="product">
                    <option value="" selected></option>
                    <option value="1">A game of thorns</option>
                    <option value="2">Widgets</option>
                    <option value="3">Tic-Tac-Toe</option>
                    <option value="4">Toe-Tac-Tic</option>
                    <option value="5">Count Up</option>
                    </select>
                </td>
                <td>
                    <input type="number" id="quantity" name="quantity" min="0" max="20">
                </td>
                <td>
                    <input type="text" name="cartPrice" id="cartPrice" readonly>
                </td>
            </tr>
    </table>
    </div>
    <div class="column">
    <table id="productCart">
    <tr>
        <th>Base Price</th>
        <th>Total Price</th>
        <th>Sales Tax</th>
        <th>Final Total</th>
    </tr>
    <tr>
        <td><input type="text" name="basePrice" id="basePrice" class="basePrice date0 sum" readonly></td>
        <td><input type="text" name="totalPrice" id="totalPrice" class="totalPrice date0 sum" readonly></td>
        <td><input type="text" name="salesTax" id="salesTax" class="salesTax date0 sum" readonly></td>
        <td><input type="text" name="finalTotal" id="finalTotal" class="subtotal"readonly></td>
        <td></td>
    </tr>
    </table>
    </div>
    </div>
    </form>
    <input id="submitButton" type="submit" value="Submit Purchase">
    </section>
</body>
<footer id="footer">
    <p class="footerInfo">~ Contact US ~ 000-000-0000 ~ ABC Games ~ </p>
    <address>543 Naught Ln | Myrtle Beach | SC 29577</address>
</footer>
</html>

这是我的 javascript

window.addEventListener("load", function() {
    grabProduct();
    buttonClick();
    
});
function grabProduct(){
    var price;
    var value;
    var totalPrice;
    var productCost;
    var salesTax;
    document.getElementById("product").addEventListener("change" , function() {
        value = this.options[this.selectedIndex].value;
        if(value == 1) {
            price = "54.55";
        }
        if(value == 2) {
            price = "22.95";
        }
        if(value == 3) {
            price = "99.89";
        }
        if(value == 4) {
            price = "1.25";
        }
        if(value == 5) {
            price = "13.57";
        }
    document.getElementById("quantity").addEventListener("change" , function() {
    //puts value of quantity select into value variable
    value = document.getElementById("quantity").value;
    //Calculate product * amount of product and put into variable
    productCost = value * price;
    salesTax = productCost * .11;
    finalTotal = productCost - salesTax;
    document.getElementById("basePrice").value = formatUSCurrency(price);
    document.getElementById("cartPrice").value = formatUSCurrency(productCost);
    document.getElementById("totalPrice").value = formatUSCurrency(productCost);
    document.getElementById("salesTax").value = formatNumber(salesTax);
    document.getElementById("finalTotal").value = formatUSCurrency(finalTotal);
    });
    document.getElementById("basePrice").value = formatUSCurrency(price);
    });
    
}
//Formats to currency
function formatUSCurrency(val) {
   return val.toLocaleString('en-US', {style: "currency", currency: "USD"} );
}
//Formats numbers 
function formatNumber(val, decimals) {
   return val.toLocaleString(undefined, {minimumFractionDigits: decimals, 
                                         maximumFractionDigits: decimals});
}
function buttonClick(){
    document.getElementById("submitButton").onclick = function() {
        location.href = "confirmProducts.html";
    };
}

如果有人能指出我正确的方向或另一个像这样回答的问题，那就太棒了。

Answer 1

您可以使用 localStorage.
localStorage 是浏览器中的一种地图对象，您可以使用 setItem 和 getItem 方法在其中存储您想要的任何数据。

尝试将您的 table 数据保存到 json 对象中并将其存储在本地存储中，然后在 confirmProducts.html 页面中将其拉出。
像这样：

// mainPage.html

const products = {
  // ... the table data
}

localStorage.setItem('products', JSON.stringify(products));


// confirmProducts.html

const products = localStorage.getItem('products')

请注意，本地存储只能存储字符串值，因此您需要使用 JSON.stringify() 函数来存储产品 json。

使用 javascript 在页面之间传输 table 数据

Transfer table data between pages with javascript

html

javascript

css

input

option