I wrote a little code sample which:

• load images
• manipulate DOM (replace images)
• store/retrieve related data using localStorage

Here's the code and demo: http://embed.plnkr.co/hTecMEP9VB300qNhzB2D/

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

1. I believe these lines should be together, maybe wrapped into a function:

   localStorage.setItem('myImageURLWidth', this.width); localStorage.setItem('myImageURLHeight', this.height);

   and

   localStorage.setItem('myImageURL', url);

   ...but they aren't, because in order to know the image's width and height, the image must be loaded beforehand. 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();

also aren't together.

3. Are there recommended practices for separating localStorage related code (ex: checkURL() and addHTTP()) into a module or something?

These are the main points that bother me now. If there's anything else not mentioned that could be improved, I'd love to hear.

obs: I'd preferably handle these situations without an external library, using only JavaScript, but if there are some helpful ones, they're also welcome.

Thanks a lot