本地存储在 openlayers 地理定位中不起作用

Question

HERE 是我从 openlayers3 示例页面拉取的一个小演示，您可以在下面看到一段示例代码：

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }),
    view: view
});

现在想用localStorage，所以修改代码如下：

if(!localStorage.layer) {
    localStorage.layer = new ol.layer.Tile({ source: new ol.source.OSM()  })
}

// creating the map
var map = new ol.Map({
    layers: localStorage.layer ? [ localStorage.layer ] : [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
        })
    }),
    view: view
});

现在由于某种原因这不起作用，现在如果我进行一些调试我会得到以下结果

现在，如果我在控制台中键入以下内容：

new ol.layer.Tile({ source: new ol.source.OSM() })

我明白了

G {ca: false, ka: undefined, fb: Kc, pd: G, Ma: null…}

但如果我这样做

localStorage.layer = new ol.layer.Tile({ source: new ol.source.OSM()  })

然后输入：

localStorage.layer

我明白了

"[object Object]"

那么为什么 localStorage.layer 不等于新 ol.layer.Tile({ source: new ol.source.OSM() })？我相信这是导致地图无法加载的原因。当然，如果我删除 localStorage 代码，地理定位地图就可以正常工作。那么为什么 localStorage.layer 不等于新的 ol.layer.Tile({ source: new ol.source.OSM() })？

Answer 1

Tile returns 某种对象，而 localStorage.getItem(layerStr) 的值是一个字符串。要从字符串中提取存储的对象，您可以执行 JSON.parse(localStorage.getItem(layerStr))，其中 layerStr = JSON.stringify(layer)。这是一个在 localStorage 中存储和检索对象的非常人为的示例：

var person = {first: 'Tenali', last: 'Raman'};

localStorage.setItem('person', JSON.stringify(person));

JSON.parse(localStorage.getItem('person'));  // => {first: 'Tenali', ...}

但不幸的是，即使那样，您也无法得到想要的答案，正如这表明的那样：

var storedTile = JSON.parse(localStorage.getItem(layer));
var storedTile2 = JSON.parse(localStorage.getItem(layer));

storedTile == storedTile2;  // => false
storedTile === storedTile2;  // => false; follows from the line above

一般来说，对象是按身份比较的，而不是按值比较的。查看 this answer 两个 javascript 对象之间的相等关系以获取详细信息。

Answer 2

localStorage对象只能存储字符串，见doc.

当你做 localStorage.layer = new ol.layer.Tile({ source: new ol.source.OSM() }) 实际上你存储 (new ol.layer.Tile({ source: new ol.source.OSM() })).toString() 所以 localStorage.layer = "[object Object]" 显然不能等于你的图层对象。

您根本无法在本地存储中存储对象，只能存储字符串。

本地存储在 openlayers 地理定位中不起作用

Localstorage not working in openlayers geolocation

javascript

openlayers-3