Load image from URL. Store/retrieve using LocalStorage.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="sky">
    
      <div id="nav">

        <button class="btn btn-small btn-default" data-toggle="modal"
   data-target="#fileModal" title="Carregar imagem">
          <span class="glyphicon glyphicon-file"></span>
        </button>

        <button class="btn btn-small btn-default" id="resetImage">
           <span class="glyphicon glyphicon-ban-circle" title="Restaurar imagem padrão"></span>
        </button>

      </div>
      
      <div id="image"></div>
      
    </div>

    <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title" id="myModalLabel">Choose an image</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control" placeholder="Insert image URL" id="image-url">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="chooseFile">OK</button>
                </div>
            </div>
        </div>
    </div>

  </body>

</html>

$(document).on('ready', function(){

  $('#chooseFile').on('click', function (e) {
    url = $('#image-url').val();
    
    // check if it's empty
		if (url === "")
			alert('Please type a URL');		

		url = addHTTP(url);
		
    if (checkURL(url)){

      // get image size (and save dimensions in local storage)
      getImageDimensions(url, updateBackgroundDimensions);
      
      localStorage.setItem('myImageURL', url);
      updateBackgroundImage(url);

      $('#fileModal').modal('hide');
    }else{
      alert('Not a valid image!');
    }
  });
  
  $('#resetImage').on('click', function (e) {
    window.localStorage.clear();
    location.reload();
  });
  
  checkLocalStorage();
});

function checkLocalStorage(){
  if(localStorage.getItem('myImageURL') &&
    localStorage.getItem('myImageURLWidth') &&
    localStorage.getItem('myImageURLHeight')) {

    updateBackgroundDimensions(localStorage.getItem('myImageURLWidth'),localStorage.getItem('myImageURLHeight'));
    updateBackgroundImage(localStorage.getItem('myImageURL'));
  }
}

function updateBackgroundDimensions(w, h){
  $('#image').css('width', w);
  $('#image').css('height', h);
  $('#image').css('background-size', w + 'px ' + h + 'px');
}

function updateBackgroundImage(url){
  $('#image').css('background-image', 'url('+url+')');
}

function getImageDimensions(url, callback){
  var img = $('<img src="'+url+'"/>').load(function(){
    localStorage.setItem('myImageURLWidth', this.width);
    localStorage.setItem('myImageURLHeight', this.height);
    callback(this.width, this.height);
  });
}

function addHTTP(url) {
   if (!/^(f|ht)tps?:\/\//i.test(url)) {
      url = "http://" + url;
   }
   return url;
}

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) !== null);
}





// http://stackoverflow.com/questions/9714525/javascript-image-url-verify
// (this might be useful for when you have a url that's not an image but will return one)
//
// function testImage(url, callback, timeout) {
//     timeout = timeout || 5000;
//     var timedOut = false, timer;
//     var img = new Image();
//     img.onerror = img.onabort = function() {
//         if (!timedOut) {
//             clearTimeout(timer);
//             callback(url, "error");
//         }
//     };
//     img.onload = function() {
//         if (!timedOut) {
//             clearTimeout(timer);
//             callback(url, "success");
//         }
//     };
//     img.src = url;
//     timer = setTimeout(function() {
//         timedOut = true;
//         callback(url, "timeout");
//     }, timeout); 
// }

html, body { height:100%; margin: 0; padding: 0; }
#sky {
  background: #eee;
  height: 100%;
}

#image {
  background-image: url('http://callhart.com/crazy/wp-content/uploads/2008/03/600px-pi-symbolsvg.png');
  background-size: 585px 585px;
  width: 585px;
  height: 585px;  
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

#nav {
  padding: 10px;
}

issues:
  
1) These should be together:

    localStorage.setItem('myImageURLWidth', this.width);
    localStorage.setItem('myImageURLHeight', this.height);
    
    and
    
    localStorage.setItem('myImageURL', url);
    
    ...but aren't, because to know image's width and height, the image must be loaded before hand. And it wouldn't make sense to pass the image's url along for the callback function (updateBackgroundDimensions) to use it.
  
2) For the same reason,

  updateBackgroundImage(url);
  
  and 
  
  updateBackgroundDimensions();
  
  aren't together as well
  
3) How could I separate all the LocalStorage related code (ex: checkURL() and addHTTP()) into a module or something? That includes methods like: