使用javascript在页面之间传输表数据[重复]答案

【问题标题】：Transfer table data between pages with javascript [duplicate]使用javascript在页面之间传输表数据[重复]
【发布时间】：2021-12-13 01:24:15
【问题描述】：

我创建了一个表单，要求用户从下拉列表中选择一个选项，并从数字输入中选择一个数量。使用 javascript 我计算了几个不同的值并将它们放在一个新表中。我想让用户单击一个提交按钮，该按钮会将用户带到一个新页面，该页面将显示相同的 productCart 计算值表。单击按钮后，如何将新值传输回此新页面上的表中。我已将表格 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";
    };
}

如果有人能指出我正确的方向或其他类似的回答问题，那就太棒了。

【问题讨论】：

可能对你有帮助。尝试在本地存储中保存价值。并在第二页尝试从 localStorage 加载数据并根据您的需要进行处理。或者，如果您有少量数据，则将其添加到您的新页面 url 并使用 window.location 访问它。然后根据您的需要进行处理。

标签： javascript html css input option

【解决方案1】：

您可以在浏览器中使用localStorage。
localStorage 是一种地图对象，您可以使用setItem 和getItem 方法在其中存储您想要的任何数据。
尝试将您的表格数据保存为 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。

【讨论】：