How to store map tiles locally using openlayers

How to store map tiles locally using openlayers

I just picked up a piece of code from the openlayers3 examples see  HERE, now everytime you click the "geolocate me" button the tiles of the map are reloaded , now is there anyway for the tiles of the map to be stored locally ? I.E. when i click on the "geolocate me!" button the 2nd time around the tiles sould be loaded from the users browser locally, rather than being fetched from the internet.

The code for generating the map is as following:


  1. var map = new ol.Map({
  2.     layers: [
  3.         new ol.layer.Tile({
  4.             source: new ol.source.OSM()
  5.         })
  6.     ],
  7.     target: 'map',
  8.     controls: ol.control.defaults({
  9.         attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
  10.             collapsible: false
  11.         })
  12.     }),
  13.     view: view
  14. });
I tried the following using localstorage:

  1. if(localStorage.layer) {
  2.     localStorage.setItem('layer' , JSON.stringify(new ol.layer.Tile({ source: new ol.source.OSM()})  ));       console.log(localStorage.layer);
  3. }

  4. var map = new ol.Map({
  5.     layers: localStorage.layer ? [JSON.parse(localStorage.getItem('layer'))] : [
  6.         new ol.layer.Tile({
  7.             source: new ol.source.OSM()
  8.         })
  9.     ],
  10.     target: 'map',
  11.     controls: ol.control.defaults({
  12.         attributionOptions: * @type {olx.control.AttributionOptions}  ({
  13.             collapsible: false
  14.         })
  15.     }),
  16.     view: view
  17. });
But this does't seem to work, what can i do so that the tiles of the map are stored locally instead of being loaded from over the internet ?

a example i have seen using the DOJO library is HERE.