How do I save the option chosen by the html user as a cookie?

Question

I have a Javascript background change system on my site, and I want when the user chooses the background he wants, the background he chose to keep when he accesses the site again.

Javascript

function mudar9(){ document.body.background = "fundos/9.png"; } 

HTML

<a href="javascript mudar9();"></a>

Answer 1

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

You can use cookies, as already shown in the other reply, or use the Storage location, which is very simple and does not load your requests with unnecessary data.

Here an excellent post on the subject.