如何在单独的 html 页面上显示来自提交表单的计算值？ [复制]答案

【问题标题】：How to display calculated value from a submission form on a separate html page? [duplicate]如何在单独的 html 页面上显示来自提交表单的计算值？ [复制]
【发布时间】：2021-11-02 17:30:33
【问题描述】：

所以我创建了一个提交表单，它将根据输入的内容计算最终值。当用户单击按钮时，我希望能够在单独的页面上显示此值。

我最初尝试在单击按钮时在同一页面上显示值。这行得通，但我还没有弄清楚单击此按钮时如何在另一个页面上显示它。我试图弄清楚如何使用 sessionStorage 来实现这一点，但我认为我没有正确使用它。此时，单击按钮会将用户转到第二个页面，但最终值不会显示在那里。我对编码很陌生，所以非常感谢您的帮助！

第 1 页 JS

function computeval(){

    var distance1 = document.getElementById('distance1').value;
    var distance2 = document.getElementById('distance2').value;
    var hotel = document.getElementById('hotel').value;
    var emair = (distance1 * 0.0665).toFixed(2);
    var emland = emair + (distance2 * 0.1809).toFixed(0);
    var totalem = emland + (hotel * 19.2).toFixed(0); totalem.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    tot=document.getElementById('totalem').innerHTML = "Total Emissions (kg) = "+totalem; 
} 

function handleSubmit () {
    
    localStorage.setItem('em', tot);  
}

第 1 页 HTML

<form action="result.html" method="POST">
  <button type="submit" class="btnop" onclick="handleSubmit()" >Submit</button>
</form>

第 2 页 JS

localStorage.getItem('em');

第 2 页 HTML

<body>
        <h1>
            Result Page
        </h1>

【问题讨论】：

标签： javascript

【解决方案1】：

这是因为 sessionStorage 仅对正在创建的页面/选项卡有效，并在关闭时被清除。对于您的情况，您需要改用 localStorage，它可以跨页面访问。像这样：

function handleSubmit () {    
    localStorage.setItem('em', tot);  
}

来源：https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

【讨论】：

哦，我明白了！我现在已经将第 1 页 js 和第 2 页 js 更改为本地存储，但是当我单击按钮时，第二页上仍然没有显示任何内容。在将我发送到第二页之前，我只能快速看到第一页上显示的值？