How do I persist with information after reloading the page? (e.g., a chosen background)

Question

I have a background swap script from the site:

function bac(){
    document.body.background = "img/1.png";
}

<a href="#" onclick="javascript: bac();">

The user can choose the background image of the site, but when the page reloads, the background is white again. It has to save the option the user chose, even if he restarts the pc?

Answer 1

To save a user’s information you have 3 options:

Store in the database

This case needs authentication/login. There when the user clickar has to send an AJAX to the server in order to save the data and the user name reference.

_{I do not think that is what you want but I had to say.}

Store in HTML5 Storage

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

To sessionStorage is only for the session and is lost when the window closes. What you want to use is the localStorage which remains on the computer even if it is restarted.

This API has the methods:

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

An example for your case 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"));

Store in Cookie

I already gave this answer in another question of yours.

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

And in that case the syntax will be:

docCookies.setItem(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, then you can use it like 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: http://jsfiddle.net/wpnk5ep8/

(Try refreshing the example after you have changed the color and you will see that the Cookie saves the unformaçõ.

---

Code in page of the MDN:

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*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

Answer 2

There is the option to use Local Storage present 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";
}