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

Solution

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

Comments

[khollenbeck]

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. .. Did you unstringify it when passing the data back? stackoverflow.com/questions/11171746/reverse-of-json-stringi‌​fy

[Matt Meadows]

would posting allow me to keep the array in the current format as well as keep all the data within it? I'd also like to be able to call this same array at a later date to upload to a server

[william.taylor.09]

Yup, check out this tutorial: boutell.com/newfaq/creating/scriptpass.html

[Matt Meadows]

That example uses php, as i'm building an application in phonegap i cannot use php files for data transfer

[khollenbeck]

No need to post the data.. You could use session storage.. Or use a framework such as angular and build a single page application.

[Matt Meadows]

@KrisHollenbeck Could i pass the variable if i used something like jQuery mobile as i tried to get my head around angular and its an incredibly steep learning curve for the amount of time i have left to complete this application

[khollenbeck]

Yes you could pass a variable.. I will post a basic example.

[Matt Meadows]

I have rebuilt the application using jQuery mobile so that all javascript is located on the same html doc, i will be trying your solution to see if it resolves my issue