Getting images and saving them to localstorage The code in this project accepts an image URL and creates an &lt;img&gt; tag dynamically, using the image URL as the src attribute value. The image *name *and URL are then saved to localStorage. The page can be viewed here.

I really want to improve this code. I can't say if it's a good approach. I can't really think of anything else on how to accomplish this but it works. What I really want to know is if I can make this simpler. I think I kind overdid it. Did I?

/*jshint esversion: 6 */


function saveImages(name, value) {
    if (typeof(Storage) !== undefined) {
        localStorage.setItem(name, value);
    }
    else {
        alert("LocalStorage is not supported on your browser");
    }
}

function loadStorage() {
    const container = $(".images-container");
    let elem;
    var keys = Object.keys(localStorage),
        i = 0,
        key;
    for (; key = keys[i]; i++) {
        elem = "&lt;img src='' " + "id='" + key + "' /&gt;";
        $(container).append(elem);
        let thisImg = document.getElementById(key);
        let source = localStorage.getItem(key);
        $(thisImg).attr('src', source);
    }
}

$(function() {
    "use strict";
    loadStorage();
    const create_btn = $("#createImage");
    const save_btn = $("#saveImages");
    const inputUrl = $("#ImageUrl");
    const inputName = $("#imageName");
    const container = $(".images-container");


    var createThisImage = function(name, url) {
        if ((name === "" &amp;&amp; url === "") || (url === "")) {
            alert(" - expected input");
        }
        else if (name === "" || document.getElementById(name)) { //if name exists or name is empty then create a random name
            name = guid();
            name = new Image(url, name);
            name.createImage();
        }
        else {
            name = new Image(url, name);
            name.createImage();
        }

    };


    $(create_btn).on('click', function() {
        var new_image = inputName.val();
        var source = inputUrl.val();
        createThisImage(new_image, source);
    });


    $('img').on('click', function() {
        const identity = $(this).attr('id');
        const isValidDeletion = confirm("Delete " + identity + "?");
        if (isValidDeletion) {
            localStorage.removeItem(identity);
            window.location.reload(true);
        }
    });



    function Image(url, name) {
        this.img_url = url;
        this.img_name = name;
    }

    Image.prototype.createImage = function() {
        let id = this.img_name;
        let elem = "&lt;img src='' " + "id='" + id + "' /&gt;";
        $(container).append(elem);
        let thisImg = document.getElementById(id);
        thisImg.src = this.img_url;
        saveImages(this.img_name, this.img_url);
        window.location.reload(true);
    };


});








//Code from https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript 
function guid() {
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
}

function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
}
loadStorage()


Wierd selective use of jQuery.


container is already a jQuery object. Just do container.append(elem); no need to wrap it in jQuery again.
document.getElementById(key); could be shortened to $("#"+key)[0]
$(thisImg).attr('src', source); could just be thisImg.src = source



createThisImage()


Why didn't you declare this function like the other ones?
The conditional if ((name === "" &amp;&amp; url === "") || (url === "")) is the exact same thing as if (url === "")


Image.prototype.createImage()


Image is already a JS object, it represents an &lt;img&gt; object. Get rid of your Image constructor and use the native one.

Image.prototype.createImage = function() {
    $(container).append(this);
    saveImages(this.id, this.src);
    window.location.reload(true);
};


This would then be used like this...

img = new Image();
img.id = name;
img.src = url;
img.createImage();