javascript passing variables to the next page (without php)

Question

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).

How about using the local storage? – Wiktor Zychla Jan 23 '16 at 14:07 — Wiktor Zychla, Jan 23 '16 at 14:07
Are those pages on the **same domain**? – Roko C. Buljan Jan 23 '16 at 14:20 — Roko C. Buljan, Jan 23 '16 at 14:20

guysigner · Accepted Answer · 2016-01-23T14:24:37.607

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

Why `GetX-Y`A-Z ? isn't it simpler to pass the **desired** LS db **name** trough an argument? — Roko C. Buljan, Jan 23 '16 at 14:17
Hi thanks a lot for the quick response it solved my problem! — Sid, Jan 23 '16 at 14:20

score 1 · Answer 2 · answered Jan 23 '16 at 14:18

Use a simple form on the first page that is configured with method="GET" and action="/page2.html". The input fields within the form should also have a name attribute filled in, for example <input name="x">. Then when you press the submit button in your form, it will pass along the field names and values as a querystring to the second page. For example /graph.html?x=123&y=456.

On this second page you want to read these values, so you need to parse the querystring which is located in window.location.search. There are various ways of doing this, but no built-in feature (it will always be a string, for example x=123&y=456 that you need to parse). I will leave that open as you mention it is a school project and that last bit would be the next challenge ;)

(localStorage as described by @remdevtec is also an option of course.)

Thanks man both urs and remdevtec's solution are working perfectly :-) — Sid, Jan 23 '16 at 15:09

javascript passing variables to the next page (without php)

2 Answers2

Linked