JSFiddle - React, Tailwind, and code Playground

by Luiz Silva

HTML

<button id="ds">Download and Save</button>
<button id="ls">Load and Show</button>

JavaScript

window.URL = window.URL || window.webkitURL;
function downloadImage(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e) {
    if (this.status == 200) {
      var reader = new FileReader();
      reader.onload = function (e) {
        callback.call(callback, e.target.result);
      }
      reader.readAsDataURL(this.response);
    }
  };
  xhr.send();
}

document.querySelector('#ds').addEventListener('click', function() {
  downloadImage('https://s3-eu-west-1.amazonaws.com/kienzle.geschaeft/yellow_MarkerA.png', function(base64String) {
    localStorage.setItem('imagem', base64String);
  });
});

document.querySelector('#ls').addEventListener('click', function() {
  var img = document.createElement('img');
  img.src = localStorage.getItem('imagem');
  document.body.appendChild(img);
});