JavaScript 将变量传递到下一页(没有 PHP）

javascript passing variables to the next page (without php)

本文关键字：一页 没有 PHP 变量 JavaScript      更新时间：2023-09-26

我是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 值（它们是在提交表单时生成的）。

Use window.localStorage

将以下文本对象放在某个js文件中，您将从当前页面和下一页引用该文件（或者只是将对象粘贴到任何必要的位置）。

var xyStore =
    {
        GetX: function () {
            return JSON.parse(localStorage.getItem("x"));                
        },
        GetY: function () {
            return JSON.parse(localStorage.getItem("y"));                
        },
        SetX: function (x) {
            localStorage.setItem("x", JSON.stringify(x));
        },
        SetY: function (y) {
            localStorage.setItem("y", JSON.stringify(y));
        },
   };

在当前页面中使用：

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" 的简单表单。表单中的输入字段还应填写name属性，例如 <input name="x"> 。然后，当您按下表单中的提交按钮时，它会将字段名称和值作为查询字符串传递到第二页。例如/graph.html?x=123&y=456 .

在第二页上，您要读取这些值，因此您需要解析位于 window.location.search 中的查询字符串。有多种方法可以做到这一点，但没有内置功能（它将始终是一个字符串，例如您需要解析的字符串x=123&y=456）。当你提到这是一个学校项目时，我将保持开放，最后一点将是下一个挑战;)

（@remdevtec描述的localStorage当然也是一种选择。

相关文章：