如何在单独的 html 页面上显示来自提交表单的计算值？ [复制]
Posted
技术标签:
【中文标题】如何在单独的 html 页面上显示来自提交表单的计算值？ [复制]【英文标题】：How to display calculated value from a submission form on a separate html page? [duplicate] 【发布时间】：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(?=(\d3)+(?!\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>
【问题讨论】：
【参考方案1】：这是因为 sessionStorage 仅对正在创建的页面/选项卡有效，并在关闭时被清除。 对于您的情况，您需要改用 localStorage，它可以跨页面访问。 像这样：
function handleSubmit ()
localStorage.setItem('em', tot);
来源：https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
【讨论】：
哦，我明白了！我现在已经将第 1 页 js 和第 2 页 js 更改为本地存储，但是当我单击按钮时，第二页上仍然没有显示任何内容。在将我发送到第二页之前，我只能快速看到第一页上显示的值？以上是关于如何在单独的 html 页面上显示来自提交表单的计算值？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章