Question

当用户点击将创建功能的按钮并使用localStorage()将其位置保存到geolocation()时，我正在创建一项功能。如果用户然后刷新页面，或导航到不同的页面并且他们回来，我希望它重新绘制该功能。由于某种原因，这不起作用，我没有得到任何控制台错误。每当我将localStorage版本添加到源时，它似乎都会中断。

这是我第一次在点击功能上绘制它的地方

var coords = geolocation.getPosition();
swal("Your location has been pinned! " + coords)
var parkedCar = new ol.Feature({
    geometry: new ol.geom.Point(coords)
})
localStorage.setItem("parkedCarCoords", coords);
parkedCar.setId("parkedCar");
parkedCar.setStyle(styleNS.styleFunction(styleConfig.parkedCarStyle));
geoLocationSource.addFeature(parkedCar);

这是我在页面加载时检查它并尝试绘制功能的地方

if (localStorage.getItem("parkedCarCoords")) {
        var parkedCar = new ol.Feature({
            geometry: new ol.geom.Point([localStorage.getItem("parkedCarCoords")])
        })
        parkedCar.setId("parkedCar");
        parkedCar.setStyle(styleNS.styleFunction(styleConfig.parkedCarStyle));
        geoLocationSource.addFeature(parkedCar);
    }

当我尝试这样做时，该功能根本无法从我的点击功能或我的localStorage中显示出来。

我尝试将localStorage版本添加到它自己的源中但产生了相同的结果。如果我从localStorage版本中删除geoLocationSource.addFeature(parkedCar);行，则click函数将起作用。值得注意的是，我在同一层上有一个地理位置跟踪功能，当我尝试实现这个localStorage功能时，它也没有出现。

Answer 1

我认为当你尝试从localStorage中检索坐标时会出错。在localStorage中设置并获取坐标时，它们将转换为字符串。您将此字符串传递给Point，它需要一个Array作为输入。

localStorage.setItem('coords', [1,1]);

localStorage.getItem('coords');
// Returns: "1,1" instead of [1,1]

// To pass these coordinates to a Point, use the split function
var coords = localStorage.getItem('coords').split(',');
new ol.geom.Point(coords);

Answer 2

localStorage字符串格式的对象存储项，因此当您执行localStorage.setItem("parkedCarCoords", [1, 2]);时，存储字符串1,2而非数组对象。

以同样的方式执行localStorage.getItem("parkedCarCoords");时，您会收到字符串1,2，因此[localStorage.getItem("parkedCarCoords")]等于["1,2"]。

您需要将getItem的结果拆分为具有坐标数组：

var parkedCar = new ol.Feature({
        geometry: new ol.geom.Point(localStorage.getItem("parkedCarCoords").split(','))
 })

基于先前保存在localStorage OL3中的坐标创建要素

2 个答案: