How to persist the selected background even after reloading the page?

To save information for a user you have 3 options:

Save to Database

This case needs authentication / login. Then when the user clicks, he / she must send an AJAX to the server in order to save the data and the reference of the user name.

I do not think it's what you want but you had to refer it.

Save to HTML5 Storage

The HTML5 API has two options, two types: sessionStorage and localStorage .

The sessionStorage is just for the session and is lost when the window closes. What you want to use is the localStorage that remains on the computer even if it restarts.

This API has the following methods:

• .setItem(<nome>, <dados>) To write a new record
• .getItem(<nome>) To read a saved record

An example for you would be:

function bac(imagem) {
    imagem = imagem || "img/1.png";
    localStorage.setItem("corDeFundo", imagem);
    mudarFundo(imagem);
}

function mudarFundo(url) {
    document.body.background = "url(" + url + ");";
}
if (localStorage.background) mudarFundo(localStorage.getItem("corDeFundo"));

Save on Cookie

I have already given this reply to another question .

I suggest using the code on the MDN page to create and read cookies. (I also put the bottom of the answer.)

And in this case the syntax will be:

  docCookies.getItem (name, value [ end [ path [ domain [ secure]]]) - create the cookie
docCookies.getItem (name) - read the cookie
docCookies.removeItem (name [ path [ domain]]) - remove the cookie

Using this code as support, you can then use this:

var fundo = docCookies.getItem('corDeFundo') || "#fff";
$('body').css('background-color', fundo);
$('button').on('click', function(){
    fundo = $(this).data('value');
    docCookies.setItem('corDeFundo', fundo);
    $('body').css('background-color', fundo);
});

Example: link

(Test refresh the example after you have changed the color and you will see that Cookie stores the information.

Code at MDN page :

var docCookies = {
  getItem: function (sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\$&") + "\s*\=\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    if (!sKey) { return false; }
    return (new RegExp("(?:^|;\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\$&") + "\s*\=")).test(document.cookie);
  },
  keys: function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

You have the option to use Local Storage in HTML5.

Example:

// Sempre que carregar a página verifica se existe um background pré-definido
if (localStorage.background) 
    document.body.background = localStorage.getItem("background");

// Guarda o background escolhido
function bac(){
    localStorage.setItem("background", "img/1.png");
    document.body.background = "img/1.png";
}

You can use cookies to persist the background image url and when you reload the page, you check for a value in the cookie and assign it to the background again.

Follow this link for working with cookies in javascript.