felquis/exemplo2.html

## exemplo2.html
<!doctype html>
<html lang="pt-br" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/hmtl; charset=uft8" />
		<title>Exemplo 2 - localStorage html5</title>
		<style>
			label{
				display:block;
			}
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" >
		$(document).ready(function(){
		// #1
			function gravaItens(){
				var html = $('#add').html();

				localStorage.setItem('itens',html);
			}
		// #2
			function carregaItens(){
				var html = localStorage.getItem('itens');
				$('#add').html(html);
			}

		// #3
			carregaItens();

			var $input = $('#text')
		// #4
			  , valor = ''
			  , $this = ''
			  , html = '';

		// #5
			$input.keypress(function(e){
			//#6
				if(e.keyCode == 13){
				// #7
					$this = $(this);
					valor = $this.val();
					$this.val('');
				// #8
					if(valor != ''){
						html = ''
						html += '<li>'+valor+'</li>';
						$(html).appendTo('#add');
				// #9
					gravaItens();
				//#10
					}else{
						alert('Digite algo.');
					}
				}
			});

		// #11
			$('#add').delegate('li', 'click', function(){
			// #12
				$(this).animate({height:0}, 200, function(){
				// #13
					$(this).remove();
					alert('Apagado');

				// #14
					gravaItens();
				});
			});
		});
		</script>
	</head>
<body>
	<h2>Exemplo 2</h2>
	Neste exemplo, eremos guardar no localStorage o que digitamos;<br />
	1 - digite algo e tecle enter<br />
	2 - abra outra janela do navegador com esta mesma pagina<br />
	3 - clique em cima de um item gravado<br />
	4 - feche todas as janelas e abra novamente neste mesma pagina<br />
	<hr />
	<label for="text">Escreva algo, </label>
	<input maxlength="140" size="50 "id="text" placeholder="e depois tecle enter" />
	<ul id="add"><ul>
</body>
</html>
	<!doctype html>
	<html lang="pt-br" dir="ltr">
	<head>
	<meta http-equiv="Content-Type" content="text/hmtl; charset=uft8" />
	<title>Exemplo 2 - localStorage html5</title>
	<style>
	label{
	display:block;
	}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" >
	$(document).ready(function(){
	// #1
	function gravaItens(){
	var html = $('#add').html();

	localStorage.setItem('itens',html);
	}
	// #2
	function carregaItens(){
	var html = localStorage.getItem('itens');
	$('#add').html(html);
	}

	// #3
	carregaItens();

	var $input = $('#text')
	// #4
	, valor = ''
	, $this = ''
	, html = '';

	// #5
	$input.keypress(function(e){
	//#6
	if(e.keyCode == 13){
	// #7
	$this = $(this);
	valor = $this.val();
	$this.val('');
	// #8
	if(valor != ''){
	html = ''
	html += '<li>'+valor+'</li>';
	$(html).appendTo('#add');
	// #9
	gravaItens();
	//#10
	}else{
	alert('Digite algo.');
	}
	}
	});

	// #11
	$('#add').delegate('li', 'click', function(){
	// #12
	$(this).animate({height:0}, 200, function(){
	// #13
	$(this).remove();
	alert('Apagado');

	// #14
	gravaItens();
	});
	});
	});
	</script>
	</head>
	<body>
	<h2>Exemplo 2</h2>
	Neste exemplo, eremos guardar no localStorage o que digitamos;<br />
	1 - digite algo e tecle enter<br />
	2 - abra outra janela do navegador com esta mesma pagina<br />
	3 - clique em cima de um item gravado<br />
	4 - feche todas as janelas e abra novamente neste mesma pagina<br />
	<hr />
	<label for="text">Escreva algo, </label>
	<input maxlength="140" size="50 "id="text" placeholder="e depois tecle enter" />
	<ul id="add"><ul>
	</body>
	</html>