javascript将变量传递到下一页（不含php）

我是html和javascript的初学者，非常感谢您的帮助

我正在创建一个页面，该页面接受表单中的x和y值，并将其输入到图形中

该图在同一网页上运行良好，但我希望在单击“提交”按钮后，该图位于完全不同的网页中。如何将这些变量转到不同的页面并显示相同的图形？（我希望避免使用JQuery、php等，因为这是一个学校项目）

这是我的密码：

function someFunction(){

var xScore = parseFloat(x)
var yScore = parseFloat(y)

google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['x', 'y'],
      [ xScore ,      yScore],

    ]);

    var options = {
      title: 'Sample Graph',
      hAxis: {title: 'x value', minValue: 1, maxValue: 9},
      vAxis: {title: 'y value', minValue: 1, maxValue: 9},
      legend: 'none'
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}

当我在主体中放置div之后，此图表将加载

<div id="chart_div" style="width: 900px; height: 900px;">

---

我希望将此div放在另一个html页面的正文中，但希望将此网页上生成的x和y值（它们是在提交表单时生成的）。

使用window.localStorage

将下面的文本对象放在某个

js

文件中，您将在当前和下一页中引用该文件（或者在必要时粘贴该对象）

在当前页面中使用：

xyStore.SetX(12);

在下一页中使用：

alert(xyStore.GetX()); // alerts: 12

编辑

在@RokoC.Buljan注释之后，此功能可扩展如下：

            Get: function (name) {
                return JSON.parse(localStorage.getItem(name));                
            },
            Set: function (name, val) {
                localStorage.setItem(name, JSON.stringify(val));
            }

---

使用window.localStorage

将下面的文本对象放在某个

js

文件中，您将在当前和下一页中引用该文件（或者在必要时粘贴该对象）

在当前页面中使用：

xyStore.SetX(12);

在下一页中使用：

alert(xyStore.GetX()); // alerts: 12

编辑

在@RokoC.Buljan注释之后，此功能可扩展如下：

            Get: function (name) {
                return JSON.parse(localStorage.getItem(name));                
            },
            Set: function (name, val) {
                localStorage.setItem(name, JSON.stringify(val));
            }

---

在第一页上使用配置了

method=“GET”

和

action=“/page2.html”

的简单表单。表单中的输入字段还应填写

名称

属性，例如

。然后，当您按下表单中的submit按钮时，它会将字段名和值作为查询字符串传递到第二页。例如

/graph.html？x=123&y=456

在第二个页面上，您希望读取这些值，因此需要解析位于

window.location.search

中的querystring。有多种方法可以做到这一点，但没有内置的功能（它总是一个字符串，例如需要解析的

x=123&y=456

）。正如你所说，这是一个学校项目，最后一点将是下一个挑战；）

---

（当然，@remdevtec所描述的

localStorage

也是一个选项。）

在第一页使用配置了

method=“GET”

和

action=“/page2.html”

的简单表单。表单中的输入字段还应填写

名称

属性，例如

。然后，当您按下表单中的submit按钮时，它会将字段名和值作为查询字符串传递到第二页。例如

/graph.html？x=123&y=456

在第二个页面上，您希望读取这些值，因此需要解析位于

window.location.search

中的querystring。有多种方法可以做到这一点，但没有内置的功能（它总是一个字符串，例如需要解析的

x=123&y=456

）。正如你所说，这是一个学校项目，最后一点将是下一个挑战；）

---

（

localStorage

如@remdevtec所述，当然也是一个选项。）

使用本地存储如何？使用查询字符串？这些页面在同一个域上吗？使用本地存储如何？使用查询字符串？这些页面在同一个域上吗？为什么

GetX-Y

a-Z？通过参数传递所需的LS db名称不是更简单吗？您好，非常感谢您的快速响应，它解决了我的问题！为什么

GetX-Y

A-Z？通过参数传递所需的LS db名称不是更简单吗？您好，非常感谢您的快速响应，它解决了我的问题！感谢老兄，urs和remdevtec的解决方案都运行良好：-）感谢老兄，urs和remdevtec的解决方案都运行良好：-）