0

Eu tenho um sistema de mudança de plano de fundo por Javascript no meu site, e quero que quando o usuário escolher o fundo que deseja, o fundo que ele escolheu se mantenha quando ele acessar o site novamente.

JavaScript

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

HTML

<a href="javascript mudar9();"></a>
6
  • Como quer guardar essa infomação? Numa base de dados, Cookie ou ficheiro? E que linguagem têm no lado do servidor?
    – Sergio
    Commented 14/09/2014 às 14:08
  • Cookie. Assim como no Delta-Search: delta-search.com Commented 14/09/2014 às 14:12
  • Ok, pode colocar o código que já tem? assim podemos ser mais claros na resposta.
    – Sergio
    Commented 14/09/2014 às 14:14
  • function mudar9(){ document.body.background = "fundos/9.png"; } <a href="javascript mudar9();"></a> Commented 14/09/2014 às 14:20
  • Desculpe a demora. Commented 14/09/2014 às 14:20

2 Respostas 2

7

Sugiro usar o código que está na página da MDN para criar e ler cookies. (Coloco tambem no fundo da resposta.)

E nesse caso a sintaxe será:

docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) - criar o cookie
docCookies.getItem(name) - ler o cookie
docCookies.removeItem(name[, path[, domain]]) - remover o cookie

Usando esse código como suporte, depois pode usar assim:

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);
});

Exemplo: http://jsfiddle.net/wpnk5ep8/

(Teste fazer refresh ao exemplo depois de ter mudado a cor e vai ver que o Cookie guarda a unformaçõ.


Código na página da 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;
  }
};
2

Você pode utilizar os cookies, como já foi apresentado na outra resposta, ou então usar o local storage, que é bem simples e não carrega suas requisições com dados desnecessários.

Aqui um post excelente sobre o assunto.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .