将javascript数组传递到另一个页面

我想知道是否有办法将数组及其内容传递到另一个页面以供使用

我使用一个数组来存储用于在谷歌地图上绘制多段线的坐标。数组在一个页面上工作正常，但是当我尝试调用数组在另一个地图上绘制多段线点时，数组似乎已清空，并且没有绘制多段线点

我曾尝试将localStorage与JSON stringify结合使用，但遇到了许多问题，其中google maps不接受这些值，因为它们包含的值不是预期的值，或者根本无法识别格式

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

这段代码从给定的坐标构建数组，该函数在watchPosition函数的后续调用中通过

        storeLatLng(lat, lon);

然后我想在下面的函数中使用数组值

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

---

这称为另一页的onLoad

您需要将数据发布到另一页。有大量教程可以指导您完成，包括一些已经回答的堆栈答案：

---

您可能希望在下一页的加载中获取数据。

使用会话存储或本地存储传递数据：（基本示例）

您可以使用存储会话将数据从一个页面传递到下一个页面。或者，您也可以使用行为类似的本地存储。除非本地存储在会话关闭时不会被清除

对于本地存储，只需将

sessionStorage

替换为

localStorage

要存储的数组：

var testArray = ['test'];

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

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

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

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

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

存储阵列：

var testArray = ['test'];

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

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

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

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

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

获取数组：

var testArray = ['test'];

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

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

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

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

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

清除会话存储：

var testArray = ['test'];

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

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

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

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

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

HTML:

var testArray = ['test'];

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

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

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

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

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

演示：

var testArray = ['test'];

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

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

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

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

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

支持旧版本的Internet Explorer:

var testArray = ['test'];

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

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

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

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

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

一些资源：

var testArray = ['test'];

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

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

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

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

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

---

发布是否允许我以当前格式保存阵列以及其中的所有数据？我还希望能够在以后调用同一个数组来上传到服务器Yup，查看本教程：该示例使用php，因为我正在phonegap中构建应用程序，我无法使用php文件进行数据传输，无需发布数据。。您可以使用会话存储。。或者使用angular之类的框架并构建一个单页应用程序。@Krisholenbeck如果我在尝试了解angular时使用jQuery mobile之类的工具，我可以传递变量吗？在我完成此应用程序所剩的时间内，这是一个非常陡峭的学习曲线。您可以使用会话存储。或者有很多资源。

我曾尝试将localStorage与JSON stringify结合使用，但遇到了许多问题，其中google maps不接受这些值，因为它们包含的值不是预期的值，或者根本无法识别格式。

。。您在传回数据时是否解除了它的结构？你有没有这样做过？我已经使用jQuery mobile重新构建了应用程序，这样所有javascript都位于同一个html文档上，我将尝试你的解决方案，看看它是否解决了我的问题