本地存储不能在openlayers的地理位置中工作

Localstorage not working in openlayers geolocation

本文关键字：地理位置 工作 openlayers 存储 不能      更新时间：2023-09-26

这里是我从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() })呢?

Tile返回某种Object，而localStorage.getItem(layerStr)的值是String。要从字符串中提取存储的对象，可以执行JSON.parse(localStorage.getItem(layerStr))，其中layerStr = JSON.stringify(layer)。下面是一个非常做作的例子，在localStorage中存储和从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

一般来说，对象是按身份比较的，而不是按值比较的。查看关于两个javascript对象之间相等关系的详细答案

localStorage对象只能存储字符串，参见文档。

当你执行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]"显然不能等于你的图层对象。

不能在本地存储中存储对象，只能在本地存储字符串。

相关文章：