Pass javascript array to another page

Question

I was wondering if theres a way to pass an array and its contents to another page for use.

I am using an array to store coordinates that are being used to draw a polyline onto a google map. The array works fine on one page, however when i attempt to call the array to draw the polyline points on another map, it appears the array has been emptied and no polyline points are drawn.

I have attempted to use localStorage with JSON stringify but came across many many issues where google maps wont accept the values ether because they contain values its not expecting, or because it simply cant recognise the format.

var googleLatLng = [],
    latlngs = [];

function storeLatLng( lat, lng ) {
    googleLatLng.push(new google.maps.LatLng(lat, lng));
    latlngs.push([lat, lng]);

        // setcoords = JSON.stringify(googleLatLng);
        // localStorage.setItem('GoogleLatLng', setcoords);

        // console.log(localStorage.getItem("GoogleLatLng"));

        console.log(googleLatLng);
}

This code builds the array from the given coordinates, the function is called from within onSuccess of the watchPosition function through

        storeLatLng(lat, lon);

I then want to use the array values within the following function

function finishedWalk() {
        // storedCoords = localStorage.getItem('GoogleLatLng');
        // if(storedCoords) storedCoords = JSON.parse(storedCoords);
        navigator.geolocation.getCurrentPosition(onFinishedSuccess, onFinishedError);
}

    function onFinishedSuccess(position) {

    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    storeLatLng(latitude, longitude);

        var mapOptions = {
            zoom: 17,
            center: coords,
            mapTypeControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //create the map, and place it in the HTML map div
        map = new google.maps.Map(document.getElementById("mapPlaceholder"), mapOptions);

        if (googleLatLng.length > 0) {
          var path = new google.maps.Polyline({
            path: googleLatLng,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 5
          });
          path.setMap(map);
        }
}

which is called onLoad of another page

Answer 1

Pass data using Session Storage or Local Storage: (basic example)

You can pass data from one page to the next using sessions storage. Alternatively you can also use local storage which behaves in similar fashion. Except local storage will not be cleared when the session is closed.

For local storage just replace sessionStorage with localStorage.

Array to store:

var testArray = ['test'];

Storing the Array:

$('#store').on('click', function(){
    sessionStorage.setItem('myArray', testArray);
});

Getting the Array:

$('#get').on('click', function(){
    var myArray = sessionStorage.getItem('myArray');
    alert(myArray);
});

Clearing the Session Storage:

$('#clear').on('click', function(){
    sessionStorage.clear();
});

HTML:

<a href="javascript:void(0);" id="store">Store Array</a>
<a href="javascript:void(0);" id="get">Get Array</a>
<a href="javascript:void(0);" id="clear">Clear</a>

Checking to see stored session in chrome:

If storing stringified data, make sure to convert back to JSON:

var mydata = localStorage.getItem("GoogleLatLng");
var myObject = JSON.parse(mydata);

DEMO:

http://jsfiddle.net/mdktpmw2/

Supporting older versions of Internet Explorer:

• http://modernizr.com/docs/
• https://github.com/pamelafox/lscache
• http://amplifyjs.com/

Some Resources:

• http://caniuse.com/#feat=namevalue-storage
• http://davidwalsh.name/html5-storage

Answer 2

You'll want to post the data to another page. There are a ton of tutorials that can walk you through it, including some Stack answers that have already been answered:

how can i send the data to another page without appending it in url?

passing form data to another HTML page

You'll probably want to grab the data in your onLoad of the next page.