Load images, manipulate DOM, store/retrieve data using localStorage

I wrote a little code sample which:

• load images

• manipulate DOM (replace images)

• store/retrieve related data using

localStorage

$(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 = $('').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);
}

Full demo here

It works, but many parts could be improved. To begin with:

-
I belie

Interesting question,

-
You should indeed put some things together

• But I would keep 3 distinct properties for a project of this small size

• updateBackgroundDimensions() could know the URL from the localStorage..

• localStorage.setItem('myImageURL', url); should only be called from 1 place, right before the dimensions are set.

-
Here again, if you get all the information first, then you can call updateBackgroundImage(url); and updateBackgroundImage(url); in one go.

-
getImageDimensions( having support for 1 image at a time is fine, if you have multiple images, call it in a loop ;)

Other than that, from a once over:

-
You do not need to capture img in getImageDimensions, the following works:

function getImageDimensions(url, callback){
  $('').load(function(){
    localStorage.setItem('myImageURLWidth', this.width);
    localStorage.setItem('myImageURLHeight', this.height);
    callback(this.width, this.height);
  });
}

-
You do need to write out e if you are not going to use it, the following works:

$('#resetImage').on('click', function (e) {
    window.localStorage.clear();
    location.reload();
  });

• You are not declaring url with var

Will attempt my version soonish.

StackExchange Code Review Q#57040, answer score: 3