javascript将变量传递到下一页（不含php） [英] javascript passing variables to the next page (without php)

问题描述

我正在创建一个页面，它接受表单中的值x和y，并进入它变成了一个图。

该图在同一网页上完美运行，但我希望在单击提交按钮后在完全不同的页面中显示图形。我怎样才能将这些变量传递到不同的页面并显示相同的图形？ （我想避免JQuery，PHP等，因为这是一个学校项目）

这是我的代码：

var xScore = parseFloat（x）
var yScore = parseFloat（y）

google.charts.load（'current'，{'packages'：['corechart']}）;
google.charts.setOnLoadCallback（drawChart）;
函数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中放置body时，会加载此图表。

 < div id =chart_divstyle =width：900px; height：900px;> 
  

我想将这个div放在另一个html页面的主体中，但想继续在这个网页上生成的x和y值（它们是在表单提交时生成的）。 使用window.localStorage 使用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）; 
  

在下一页使用：

 警报（xyStore.GetX（））; //快讯：12 
  

编辑

继@ RokoC.Buljan评论后，此功能可以扩展如下：

  Get：function name）{
 return JSON.parse（localStorage.getItem（name））; 
}，
 Set：function（name，val）{
 localStorage.setItem（name，JSON.stringify（val））; 
} 
  

I am a beginner in html and javascript so your help will be much appreciated.

I am creating a page that accepts values x and y from a form and enters it into a graph.

The graph is working perfectly on the same web page but i would like to have the graph in an entirely different page after I click the submit button. How can i carry forward these variables to a different page and display the same graph? (I would like to avoid JQuery, php etc altogether as this is for a school project)

Here's my code:

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);
}

This chart loads when i place following the div in the body.

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

I would like to place this div in the body of another html page but would like to carry forward the x and y values generated on this web page (they are generated when the form is submitted).

解决方案

Use window.localStorage

Put the following literal object in some js file that you will refer to from the current and the next page (or just paste the object wherever necessary).

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));
        },
   };

use in current page:

xyStore.SetX(12);

use in next page:

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

EDIT

Following @RokoC.Buljan comment, this functionality can be expanded as follows:

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

这篇关于javascript将变量传递到下一页（不含php）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！