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

You could use session storage. geekchamp.com/html5-tutorials/18-html5-session-storage or davidwalsh.name/html5-storage There are lots of resources out there. — khollenbeck
– khollenbeck, Commented Apr 7, 2015 at 18:04
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-stringify — khollenbeck
– khollenbeck, Commented Apr 7, 2015 at 18:39

khollenbeck · Accepted Answer · 2015-08-26 15:40:20Z

4

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:

enter image description here

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:

Some Resources:

edited Aug 26, 2015 at 15:40

answered Apr 7, 2015 at 18:22

khollenbeck

16.2k18 gold badges68 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Meadows Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:07:18Z

0

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.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Apr 7, 2015 at 17:59

william.taylor.09

2,22314 silver badges18 bronze badges

6 Comments

Matt Meadows Over a year ago

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 Over a year ago

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

Matt Meadows Over a year ago

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

khollenbeck Over a year ago

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 Over a year ago

@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

|

Collectives™ on Stack Overflow

Pass javascript array to another page

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related