这里是我从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]"
显然不能等于你的图层对象。
不能在本地存储中存储对象,只能在本地存储字符串。