[Resolvido] Cookies em Javascript

Henrique Barcelos · Agosto 18, 2012

Salve, salve, galera...

Aqui está um exemplo bem comentado sobre como utilizar cookies no Javascript:

<!doctype HTML>
<html>
<head>
	<title>Javascript Cookies</title>
	<meta charset="utf-8"/>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			font: 1em/1.2em sans-serif;
		}

		ul {
			list-style: none;
		}

		#container {
			width: 800px;
			margin: 20px auto;
		}

		ul#color-selector {
			margin-bottom: 20px;
		}

		ul#color-selector li {
			display: inline-block;
			border: 1px solid;
			border-radius: 3px;
		}

		ul#color-selector li a {
			color: inherit; /* links tem cores definidas, precisamos forçar a herança das cores */
			text-decoration: none;
			display: inline-block;
			padding: .5em 1em;
			text-align: center;
		}

		ul#color-selector li a:hover {
			text-decoration: underline;
		}

			li.red {
				background-color: #FCC;
			}

			li.green {
				background-color: #CFC;
			}

			li.blue {
				background-color: #CCF;
			}

		.red {
			color: #C00;
		}

		.green {
			color: #090;
		}

		.blue {
			color: #00C;
		}

		p {
			margin-bottom: 1em;
		}
	</style>
	<script type="text/javascript">
		/**
		 * @package default
		 * @author Henrique Barcelos (adaptado de http://www.quirksmode.org/js/cookies.html)
		 */
		var Cookie = function() { };

		/**
		 * Seta um cookie.

		 * @param string name : o nome do cookie
		 * @param mixed value : o valor a ser armazenado no cookie
		 * @param int days : o número de dias pelo qual o cookie será válido

		 * @return void
		 */
		Cookie.prototype.set = function(name, value, days) {
			// Se informamos a validade do cookie...
			if (days) {
				// Obtemos a data atual
				var date = new Date();
				/* Setamos a data de expiração do cookie somando a quantidade 
				 * de milissegundos em 'days' dias
				 */
				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('content');

			// Instanciamos um objeto cookie...
			var cookie = new Cookie();
			// Pegamos o valor salvo sob o nome 'class'...
			var startClass = cookie.get('class');
			// 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('class') || 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('class', iClass);
					return false; // Impede que o clique no link redirecione a página
				}
			}
		}
	</script>
</head>
<body>
	<div id="container">
		<p>Clique nos botões abaixo e atualize a página</p>
		<ul id="color-selector">
			<li class="red">
				<a href="#">Vermelho</a>
			</li>
			<li class="green">
				<a href="#">Verde</a>
			</li>
			<li class="blue">
				<a href="#">Azul</a>
			</li>
		</ul>
		<div id="content" class="red">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue, tellus laoreet egestas adipiscing, sem mauris adipiscing mauris, at vestibulum leo purus a nisi. Nullam sit amet orci lorem. Sed elementum aliquet mi, vel tristique ligula malesuada vitae. Phasellus fermentum facilisis erat eget pulvinar. Nunc faucibus fermentum tristique. Maecenas mollis lacinia gravida. Nam dolor diam, porta a convallis at, varius et lorem. Pellentesque sed leo ac diam ullamcorper auctor ut ut nulla. Duis dictum euismod leo quis vulputate. Proin et dolor justo, eget auctor ipsum. Proin felis dolor, pharetra non placerat eget, pharetra in ante. Nunc eu congue est.
			</p>
			<p>
	Duis blandit, ligula eu iaculis luctus, arcu nibh ultrices metus, in sodales risus eros ac quam. Cras laoreet bibendum suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sit amet porttitor metus. Sed mollis scelerisque suscipit. Praesent non ipsum lacus, dictum placerat dui. Suspendisse sit amet diam lorem. Nullam sollicitudin sapien a nulla aliquam mattis. Pellentesque at diam dolor. Duis felis nisi, blandit vel vestibulum et, bibendum ut urna. Nullam et nulla id mi cursus aliquet. Suspendisse accumsan, velit sed euismod condimentum, tellus nisi suscipit ipsum, vitae laoreet libero diam a sem. Nunc mi enim, cursus eget varius et, faucibus at nibh. Quisque quis est nec metus laoreet suscipit. Vestibulum nec neque in tellus laoreet rhoncus in eu risus. Sed tellus massa, placerat eget molestie sed, feugiat ac neque.
			</p>
			<p>
	Donec cursus, sem at eleifend scelerisque, elit dui molestie arcu, vel egestas odio elit sit amet lacus. Aenean rhoncus venenatis purus, eu lacinia quam vestibulum quis. Aenean faucibus augue non ligula eleifend volutpat. Morbi posuere pharetra massa, id luctus arcu adipiscing ac. Integer sapien dolor, tempor sit amet ultrices vel, pretium ut orci. Nunc a orci nunc. Proin pulvinar, lorem eu scelerisque ullamcorper, eros justo hendrerit nisl, nec rhoncus dolor felis et eros. Nunc feugiat mi vel massa pharetra nec pellentesque nisl congue. Integer rutrum sapien vitae augue pellentesque sollicitudin.
			</p>
	Aliquam blandit, justo vel sollicitudin porttitor, ipsum libero pharetra leo, luctus congue lacus leo sit amet nisi. Curabitur commodo feugiat odio et consequat. Cras ac justo massa, ut luctus ante. Etiam vitae tincidunt massa. Sed arcu massa, feugiat vitae fringilla eget, laoreet non elit. Donec feugiat ullamcorper volutpat. Nunc pulvinar feugiat lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
			<p>
	Fusce mi tellus, malesuada eget dictum eget, ultricies quis nibh. Quisque vitae aliquet est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin faucibus odio eget libero cursus lobortis. Vivamus nec arcu id libero accumsan porttitor ac ac lorem. Ut sit amet diam libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nisi libero, placerat vitae laoreet a, eleifend in orci. 
			</p>
		</div>
	</div>
</body>
</html>

Artigo original no meu blog:

:seta: http://henriquebarce...-com-javascript

Entrar

Arquivado

[Resolvido] Cookies em Javascript

Recommended Posts

Henrique Barcelos 290

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

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante