cookie em javascript

daniele bianca · Agosto 16, 2012

tenho um código, mas não sei com fazer funcionar direito.

como fazer para que um visitante possa mudar a imagem de fundo, e a mesma ser memorizada até que ele mude a imagem novamente?

tentei fazer, só que acho que errei em alguma coisa. toda vez que a página recarrega, a imagem escolhida desaparece e volta tudo ao padrão.

alguém poderia me orientar pra fazer o código abaixo funcionar?

<style>
.bg1{ background-image: url("imagem1.png"); }
.bg2{ background-image: url("imagem2.png"); }
</style>

<script type="text/javascript">


function AlterarPdeFundo(id){

document.getElementById("conteudo").className = "bg" + id;
setCookie("bg",id);
}


function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
history.go(0);
}
}
function fixDate(date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0) date.setTime(date.getTime() - skew);
}


</script>

<a href="javascript:AlterarPdeFundo(1);">TROCA 1</a>
<a href="javascript:AlterarPdeFundo(2);">TROCA 2</a>

<div id="conteudo">Conteudo do site</div>

<script type="text/javascript">


if(getCookie("bg")){
AlterarPdeFundo(getCookie("bg"));
}else{
AlterarPdeFundo(getCookie("bg1"));
}

</script>

por favor me ajudem!

Henrique Barcelos · Agosto 18, 2012

:seta: http://henriquebarcelos.in/blog/2012/08/17/manipulando-cookies-com-javascript/

daniele bianca · Agosto 18, 2012

oi henrique,

estou desde a meia-noite tentando e não consegui fazê-lo funcionar...

ao recarregar a pagina, tudo volta ao padrão.

há como você me dar o exemplo para uso de imagens?

sou novata em javascript, mas como sei que o pessoal do imasters sabe o que faz recorri a vocês. e eu preciso desse script urgente!

obrigado pela ajuda!

Henrique Barcelos · Agosto 18, 2012

Posta o seu código atual para eu dar uma olhada...

daniele bianca · Agosto 18, 2012

Posta o seu código atual para eu dar uma olhada...

<style>
.bg_1{ background-image: url("imagem1.png"); }
.bg_2{ background-image: url("imagem2.png"); }
</style>

<script type="text/javascript">


function AlterarPdeFundo(id){

document.getElementById("conteudo").className = "bg_" + id;
setCookie("bg_",id);
}


function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
history.go(0);
}
}
function fixDate(date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0) date.setTime(date.getTime() - skew);
}


</script>

<a href="javascript:AlterarPdeFundo(1);">TROCA 1</a>
<a href="javascript:AlterarPdeFundo(2);">TROCA 2</a>

<div id="conteudo">Conteudo do site</div>

<script type="text/javascript">


if(getCookie("bg_")){
AlterarPdeFundo(getCookie("bg_"));
}else{
AlterarPdeFundo(getCookie("bg_1"));
}

</script>

<script type="text/javascript">

var Cookie = function() { };

Cookie.prototype.set = function(name, value, days) {
// Se informamos a validade do cookie...
if (days) {
	// Obtemos a data atual
	var date = new Date();
	date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
	// E assim especificaremos a validade do cookie...
	var expires = "; expires=" + date.toString();
} 
// Senão...
else {
	// A validade será até o navegador ser fechado...
	var expires = "";
}
// Finalmente, setamos o cookie...
document.cookie = name + "=" + value + expires + "; path=/";
};

/**
* Retorna o valor de um cookie. Se ele não existir, retorna NULL.
* 
* @param string name : o nome do cookie a ser retornado
* 
* @return mixed
*/
Cookie.prototype.get = function(name) {
/* Temos que ter certeza que o valor buscado
 * é o nome do cookie, não seu valor.
 */
var nameEQ = name + "=";
// Obtemos todos os cookies da página...
var allCookies = document.cookie.split(';');
for(var i=0;i < allCookies.length;i++) {
	var c = allCookies[i];
	// Removemos possíveis espaços em branco...
	while (c.charAt(0) == ' ') {
c = c.substring(1,c.length);
	}
	/* Se o início do elemento atual é o cookie que
	 * buscamos, então retornaremos o conteúdo daqui
	 * pra frente, que conterá o valor do cookie.
	 */
	if (c.indexOf(nameEQ) == 0) {
// Retorna do '=' pra frente...
return c.substring(nameEQ.length, c.length);
	}
}
// Caso tal cookie não exista, retornamos null...
return null;
};

/**
* Remove um cookie. O processo é simplesmente setar um cookie
* com vencimento em uma data passada.
*
* @param string name : o nome do cookie a ser removido
*/
Cookie.prototype.remove = function(name) {
// Simplesmente setamos um cookie com vencimento no passado
this.set(name, "", -1);
}

/* --------------------------------------------------------------------------------- */

window.onload = function() {
// Obtemos o elemento #content...
var content = document.getElementById('conteudo');

// Instanciamos um objeto cookie...
var cookie = new Cookie();
// Pegamos o valor salvo sob o nome 'class'...
var startClass = cookie.get('bg_');
// Se o valor for diferente de NULL...
if(startClass !== null) {
	// Setamos a classe salva no cookie no conteúdo...
	content.className = startClass; // Compatibilidade com o IE7
}

// Obtemos todos os itens dentro do color-selector...
var colorsItems = document.getElementById('color-selector')
  .getElementsByTagName('li'); 
// Para cada um dos itens...
for(var i = 0; i < colorsItems.length; i++) {
	// Ao clicarmos...
	colorsItems[i].onclick = function(e) {
// Obtemos o valor da classe atual...
var iClass = this.getAttribute('bg_') || this.className; // maneira crossbrowser
// Atibuímos seu valor para o elemento #content
content.className = iClass; // Compatibilidade com o IE7
// Salvamos o valor atual da classe em um cookie
cookie.set('bg_', iClass);
return false; // Impede que o clique no link redirecione a página
	}
}
}
</script>

assim que a gente recarrega a pagina tudo volta ao padrão. obrigado pela ajuda!

Henrique Barcelos · Agosto 18, 2012

Bom tá uma zona... asuasashasuhsuhsa...

Deixe somente a classe Cookie que você pegou do meu artigo e recomece...

Outra coisa, TODOS os scripts devem vir dentro da tag HEAD, senão fica uma salada...

Agora algumas modificações:

<a href="javascript:AlterarPdeFundo(1);">TROCA 1</a>
<a href="javascript:AlterarPdeFundo(2);">TROCA 2</a>

Altere para:

<div id="switcher">
<a href="#" class="s_bg1">TROCA 1</a>
<a href="#" class="s_bg2">TROCA 2</a>
</div>

O Javascript mais ou menos assim:

window.onload = function() {
       // Obtemos o body...
       var content = document.getElementsByTagName('body')[0];

       // Instanciamos um objeto cookie...
       var cookie = new Cookie();
       // Pegamos o valor salvo sob o nome 'class'...
       var startClass = cookie.get('bgClass');
       // Se o valor for diferente de NULL...
       if(startClass !== null) {
               // Setamos a classe salva no cookie no conteúdo...
               content.className = startClass; // Compatibilidade com o IE7
       }

       // Obtemos todos os itens dentro do color-selector...
       var items = document.getElementById('switcher')
         .getElementsByTagName('a'); 
       // Para cada um dos itens...
       for(var i = 0; i < items.length; i++) {
               // Ao clicarmos...
               items[i].onclick = function(e) {
// Obtemos o valor da classe atual...
var iClass = this.getAttribute('class') || this.className; // maneira crossbrowser
// Atibuímos seu valor para o elemento
content.className = iClass; // Compatibilidade com o IE7
// Salvamos o valor atual da classe em um cookie
cookie.set('bgClass', iClass.split('_')[1]);
return false; // Impede que o clique no link redirecione a página
               }
       }
}

daniele bianca · Agosto 19, 2012

eu tentei henrique, mas não consegui.

vou te mostrar mais ou menos como estou fazendo, tentando dar exemplos.

a imagem abaixo mostra mais ou menos como a página deve ser.

e o código que estou usando, é mais ou menos esse:

<html>
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
 <title>pagina</title>
 <style>
  .bgfundo_1{ background-image: url("imagem1.png"); color:#fff; }
  .bgfundo_2{ background-image: url("imagem2.png"); color:#fff; }
  .menuprincipal1{ margin:0; }
  .menuprincipal1 li{ float:left; }
 </style>
<script type="text/javascript">

function AlterarPdeFundo(id){

document.getElementById("conteudo_pagina").className = "bgfundo_" + id;
setCookie("bgfundo_",id);
}


function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
history.go(0);
}
}
function fixDate(date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0) date.setTime(date.getTime() - skew);
}

</script>
<script type="text/javascript">

if(getCookie("bgfundo_")){
AlterarPdeFundo(getCookie("bgfundo_"));
}else{
AlterarPdeFundo(getCookie("bgfundo_1"));
}

</script>
</head>
<body id="conteudo_pagina" class="bgfundo_padrao"><!-- o plano de fundo é alterado diretamente no body -->
<div id="menuprincipal">
 <ul class="menuprincipal1">

  <li><a href="javascript:AlterarPdeFundo(1);">TROCA 1</a></li>
  <li><a href="javascript:AlterarPdeFundo(2);">TROCA 2</a></li>
 </ul>
</div>
<div id="texto">
 <p>exemplo de texto na pagina</p>
</div>
</body>
</html>

seria pedir muito se você me desse somente o script do cookie para essa aplicação pronto?

muuito obrigado henrique!

obs: todos ids, class e links no exemplo de código, são os que estou usando.

Henrique Barcelos · Agosto 19, 2012

Aaaah.... tem um iframe...

O problema é o iframe... Você tem que colocar esse javascript que mostrei DENTRO do iframe e fazer assim pra acessar os elementos da página exterior:

window.parent.document.getElementById('conteudo');

seria pedir muito se você me desse somente o script do cookie para essa aplicação pronto?

Eu já te dei o script do cookie...

daniele bianca · Agosto 20, 2012

é pra incluir o script abaixo dentro do iframe?

window.parent.document.getElementById('conteudo');

ou ele junto com o que você já me enviou? se sim, tem algum lugar específico pra colocar, ou posso colocá-lo em qualquer parte?

obrigado pela ajuda!

Arquivado

cookie em javascript

Recommended Posts

daniele bianca 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

daniele bianca 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

daniele bianca 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

daniele bianca 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

daniele bianca 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante