时间戳

首页 > 解决方案 > 使用 java 和 html 进行本地存储

java - 使用 java 和 html 进行本地存储

问题描述

我只是试图使用本地存储从一个 html 文件到另一个 html 文件的计算结果，因为它以前对我有用，现在我似乎无法弄清楚。我的目标是获得在第一页计算的存储“结果”以显示在第二页。

以下是脚本的代码：

function run()
{
const testConst = 41;
var age = document.getElementById('age').value;
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
var result = (10*weight) + (6.25* height) - (5*age)+5;

document.getElementById('myDiv').innerHTML = "There should be text here and the number " + result + "!";
sessionStorage.setItem("storedResult", result)
document.getElementById('divResult').innerHTML = "Your BMR is " + sessionStorage.getItem("storedResult");

以下是“第一页”的代码，我们从中获取存储计算的信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer src="script.js"></script>
    <title>Home</title>
</head>
<body>
    Age:<input type="text" id="age">
    Weight:<input type="text" id="weight">
    Height:<input type="text" id="height">
<br>

    <input type="submit" value="Submit" onclick="run();">

<br>
<br>
<div id="myDiv"></div>
<div id="divResult"></div>
</body>
</html>

以下是我试图让存储结果出现的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Results</title>
</head>
<body>
    <h1>You are on the second page</h1>
    <div id="divResult"></div>
</body>
</html>

结果页面未链接时第一页的样子，这里我相信存储工作正常

链接时结果页面的外观应该在其中的某处具有类似于“您的 bmr 是...”的文本。

感谢您的帮助。

标签： javahtmllocal-storage

解决方案

这 2 个 HTML 页面是如何连接的？1.通过页面提交：page1提交给服务器，然后服务器发送page2 2.单页申请

对于案例 1“页面提交” - 您可以将在 run() 上计算的“结果”捕获到表单隐藏元素中，例如其名称为“resultHidden”。在服务器端将此值读取为 request.getParameter("resultHidden"). 在第二页写下这个变量。我使用 JSP 将值写入第二页，您可能正在使用另一种技术。

对于案例 2“单页应用程序” - 在 run() 计算结果后，将其存储在一个全局变量中，该变量是在 page1 和 page2 上导入的 JS 文件的一部分。在 page2 上读取这个 JS 变量并写入 HTML。

对于这两种情况，您也可以使用 cookie。js可以用来从page1写入cookie，从page2读取。此外，当 page1 提交到服务器时，可以在服务器端读取 cookie。

推荐阅读