Localstorage not working in openlayers geolocation

Question

HERE is a small demo that I pulled form the openlayers3 examples page, you can see a piece of sample code below:

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

Now I wanted to use localStorage and so I modified the code to be as follows:

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

Now this for some reason doesn't work, now if I do some debugging I get the following

Now if I type the following in the console:

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

I get

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

But if I do

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

And then type:

localStorage.layer

I get

"[object Object]"

So why is localStorage.layer not equal to new ol.layer.Tile({ source: new ol.source.OSM() })? I believe this is what is causing the map to not load. Of course if I remove the localStorage code, the geolocation map works just fine. So why is localStorage.layer not equal to new ol.layer.Tile({ source: new ol.source.OSM() })?

You might want to parse `localStorage.layer` by doing something like `JSON.parse(localStorage.layer)`. That will give you the object. But I'm not optimistic about the comparison, as no two objects are identical. — Hunan Rostomyan, Oct 26 '15 at 06:47

score 1 · Accepted Answer · edited May 23 '17 at 11:58

Tile returns some kind of an Object, while the value of localStorage.getItem(layerStr) is a String. To extract the stored object from the string, you can do JSON.parse(localStorage.getItem(layerStr)), where layerStr = JSON.stringify(layer). Here is a very contrived example of storing in and retrieving an object from localStorage:

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

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

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

But even then, unfortunately, you can't get the answer you want, as this demonstrates:

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

In general, objects are compared by identity, not by value. Check this answer out on the equality relation between two javascript objects for the details.

@TenaliRaman That's because localStorage has a different API for getting/setting variables. Although the code above is for demo only, I'll modify it to reflect the Storage API. — Hunan Rostomyan, Oct 26 '15 at 07:43
@TenaliRaman I've extended my answer with an illustration of how you can store simple objects in storage and then retrieve them. — Hunan Rostomyan, Oct 26 '15 at 07:51

score 0 · Answer 2 · answered Oct 26 '15 at 07:30

The localStorage object can store only string , see the doc.

When you do localStorage.layer = new ol.layer.Tile({ source: new ol.source.OSM() }) in fact you store (new ol.layer.Tile({ source: new ol.source.OSM() })).toString() so localStorage.layer = "[object Object]" and obviously can't be equal to your layer object.

You simply can't store an object in local storage, only string.

Localstorage not working in openlayers geolocation

2 Answers2