How to save geolocation(displayed with Googlemaps) in local storage and load it later <p>I have a problem with geolocation and local storage. So this bellow is my code. Excuse me that some of the text is in cyrillic but this is because that is homework of mine and I am from Bulgaria. It is not important what does the text say. You need to know only that first button is Get, second - Save, third one - Load. So I had to make first button to show my location with Google Maps - that's OK. I made it work. The tricky part is next. With the second button "Save" I have to save the data from geolocation into local Storage. And when clicking on the third button Load - the location saved in local Storage should come visible again in the (div id="map). I tried using different suggestions but every time something is not working. Please if someone can help me with an ideal at least. And the most important thing I am not allowed to use JQuery, only Java Script. If you have questions and you don't understand any part of the code please ask me and I'll be happy to explain or rewrite it. I want to thank you in advance for your help. P.S. I am beginner in coding, that's the reason I may ask stupid questions.Please have patience.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var x = document.getElementById("map"); function getLocation() { if (navigator.geolocation) { x.style.visibility = "visible"; navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude; var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" + latlon + "&amp;zoom=14&amp;size=400x300&amp;sensor=false"; document.getElementById("map").innerHTML = "&lt;img src='" + img_url + "'&gt;"; } function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } }</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#text { width: 100%; margin-bottom: 15px; } #buttons { width: 100%; background-color: #8c8c8c; color: white; border: 2px solid #8c8c8c; padding-top: 2px; } #map { width: 100%; border: 2px solid #8c8c8c; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; visibility: hidden; background-color: #cccace; } .buttons { border-top-left-radius: 15px; border-bottom-right-radius: 15px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt; &lt;div id="text"&gt;Домашна върху HTML5 API &amp;amp; Rounded Corners&lt;/div&gt; &lt;div id="buttons"&gt; Местоположение: &lt;input type="button" class="buttons" value="Вземи" onclick="getLocation()" /&gt; &lt;input type="button" class="buttons" value="Запази" onclick="saveLocation" /&gt; &lt;input type="button" class="buttons" value="Зареди" onclick="loadLocation" /&gt; &lt;/div&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;/body&gt;</code></pre> </div> </div> </p>