javascript, переходящие переменные на следующую страницу (без php)

Question

Я новичок в 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-страницы, но хотелось бы переносить х и у значения, сгенерированные на этой веб-странице (они генерируются, когда форма была отправлена).

Answer 1

Использование 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 

EDIT

После @ RokoC.Buljan комментарий, эта функциональность может быть расширена следующим образом:

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

Answer 2

Используйте простую форму на первой странице, которая настроена с method="GET" и action="/page2.html". Поля ввода в форме должны также иметь атрибут name, заполненный, например <input name="x">. Затем, когда вы нажимаете кнопку отправки в своей форме, она будет проходить по именам полей и значениям в виде строки запроса на вторую страницу. Например, /graph.html?x=123&y=456.

На этой второй странице вы хотите прочитать эти значения, поэтому вам нужно проанализировать запрос, который находится в window.location.search. Существуют различные способы сделать это, но нет встроенной функции (она всегда будет строкой, например x=123&y=456, которую нужно проанализировать). Я оставлю это открытым, как вы говорите, что это школьный проект, и что последний бит будет следующий вызов;)

(localStorage, как описано @remdevtec также вариант, конечно)