<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>web storage &#8211; Turbosite &#8211; Blog</title>
	<atom:link href="https://www.turbosite.com.br/blog/tag/web-storage/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.turbosite.com.br/blog</link>
	<description></description>
	<lastBuildDate>Wed, 10 Dec 2014 12:01:35 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.2</generator>

<image>
	<url>https://www.turbosite.com.br/blog/wp-content/uploads/2026/09/cropped-logo_turbo_vermelha-32x32.png</url>
	<title>web storage &#8211; Turbosite &#8211; Blog</title>
	<link>https://www.turbosite.com.br/blog</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>HTML5 Web Storage &#8211; Mais seguro que Cookies</title>
		<link>https://www.turbosite.com.br/blog/html5-web-storage-mais-seguro-que-cookies/</link>
		
		<dc:creator><![CDATA[turboajuda]]></dc:creator>
		<pubDate>Wed, 10 Dec 2014 12:01:35 +0000</pubDate>
				<category><![CDATA[Desenvolvimento]]></category>
		<category><![CDATA[Dicas]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[armazenando dados h5ml]]></category>
		<category><![CDATA[html 5 web storage]]></category>
		<category><![CDATA[web storage]]></category>
		<guid isPermaLink="false">http://blog.turbosite.com.br/?p=3925</guid>

					<description><![CDATA[HTML 5 Web Storage é uma alternativa para armazenar dados e os persistirem do lado do cliente. Ele é mais seguro e confiável que os Cookies.]]></description>
										<content:encoded><![CDATA[<p>HTML 5 Web Storage é uma alternativa para armazenar dados e os persistirem do lado do cliente. Ele é mais seguro e confiável que os Cookies, além de não serem enviados em todas as requisições para o servidor, em consequência, em aplicações de grande porte isto economizará muitos dados trafegados.</p>
<p>Uma citação da W3C Schools que vale nossa atenção, ela é mencionada comparando com os Cookies:</p>
<blockquote><p>Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.</p></blockquote>
<p>Fonte: <a href="http://www.w3schools.com/html/html5_webstorage.asp">http://www.w3schools.com/html/html5_webstorage.asp</a></p>
<p>&nbsp;</p>
<p>Nós publicamos um artigo falando sobre <a title="SQL do lado do Cliente? Web SQL Database com HTML5" href="https://www.turbosite.com.br/blog/sql-do-lado-do-cliente-web-sql-database-com-html5/">Web SQL Database</a> que veio para suprir esta necessidade, mas, infelizmente publicamos uma tecnologia que está <span style="color: #ff0000;">obsoleta <span style="color: #000000;">(gafe nossa)</span></span> e por isso não indicamos a utilizá-la.</p>
<p>&nbsp;</p>
<p>A vantagem de utilizarmos o HTML 5 Web Storage é a facilidade, a compatibilidade já que, ele é suportado na maiores dos browser e por incrível que pareça, a partir do IE8 você pode utilizá-lo (isto chega a nos surpreender).</p>
<p>Testados e suportados:  <img decoding="async" class="alignnone size-large wp-image-3927" src="https://www.turbosite.com.br/blog/wp-content/uploads/2014/12/compatible_safari.gif" alt="compatible_safari" width="28" height="30" /> <img decoding="async" class="alignnone size-large wp-image-3928" src="https://www.turbosite.com.br/blog/wp-content/uploads/2014/12/compatible_chrome.gif" alt="compatible_chrome" width="31" height="30" /> <img decoding="async" class="alignnone size-large wp-image-3929" src="https://www.turbosite.com.br/blog/wp-content/uploads/2014/12/compatible_firefox.gif" alt="compatible_firefox" width="31" height="30" /> <img loading="lazy" decoding="async" class="alignnone size-large wp-image-3930" src="https://www.turbosite.com.br/blog/wp-content/uploads/2014/12/compatible_ie.gif" alt="compatible_ie" width="31" height="30" /> <img loading="lazy" decoding="async" class="alignnone size-large wp-image-3931" src="https://www.turbosite.com.br/blog/wp-content/uploads/2014/12/compatible_opera.gif" alt="compatible_opera" width="28" height="30" /></p>
<p>Um detalhe que deve ser conhecido é, o Local Storage é por domínio e os dados podem ser armazenados/acessados por todas as páginas do mesmo.</p>
<p>Bom, chega de explicações, vamos a prática.</p>
<p>&nbsp;</p>
<h2>Métodos utilizados</h2>
<p>localStorage.setItem(name, value);<br />
localStorage.getItem(name);<br />
localStorage.clear();<br />
localStorage.length;</p>
<p>&nbsp;</p>
<h2>Testando se o Browser suporta Web Storage</h2>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">if(typeof(Storage) !== "undefined") {
    // Código para localStorage/sessionStorage
} else {
    // Implemente outra solução, está não funciona. :/
}</pre>
<p>&nbsp;</p>
<blockquote><p><strong>Observação</strong>: O Web Storage não armazena objetos e  arrays em JavaScript, por isto utilizamos o JSON.stringify e JSON.parse para converter os objetos de forma apropriada para armazenar.</p></blockquote>
<p>&nbsp;</p>
<h2>Armazenando uma informação</h2>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">// Forma declarativa
localStorage.setItem("employer", "Turbosite"); 	// Armazena o valor
localStorage.getItem("employer"); 		// Resgata o valor "Turbosite"

// Forma comprimida
localStorage.employer = "Turbosite";		// Armazena o valor
localStorage.employer; 				// Resgata o valor "Turbosite"</pre>
<p>&nbsp;</p>
<h2>Verificando o tamanho do Web Storage</h2>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">// Verificando o tamanho do Storage ( itens armazenados )
localStorage.length</pre>
<p>&nbsp;</p>
<h2>Removendo itens</h2>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">// Remover um item pela API
localStorage.removeItem("employer");

// Remover um item via Javascript nativo
delete(localStorage.employer);</pre>
<p>&nbsp;</p>
<h2>Zerando o Web Storage</h2>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">// Remover tudo
localStorage.clear();			// Reseta os dados
</pre>
<h2></h2>
<h2>Armazenando objetos em Javascript</h2>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">data_employer = {
	"name": "Turbosite",
	"phones" : [
		"4003-2322",
		"4062-1020",
		"0800 888 2322"
	],
	"location": {
		"city": "Belo Horizonte",
		"state": "Minas Gerais",
		"country": "Brasil"
	}
}

localStorage.data_employer = data_employer;
localStorage.data_employer; // Resultado: "[object Object]"</pre>
<p>&nbsp;</p>
<p>Como podem ver, o resultado não foi o esperado, o Web Storage converteu o objeto para toString() e em vez de armazenar os dados do objeto, armazenou a string [object Object].</p>
<p>Uma solução seria, converter o objeto para string e armazená-lo, existe a função nativa JSON.stringify, desta forma ficaria:</p>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">data_employer = {
	"name": "Turbosite",
	"phones" : [
		"4003-2322",
		"4062-1020",
		"0800 888 2322"
	],
	"location": {
		"city": "Belo Horizonte",
		"state": "Minas Gerais",
		"country": "Brasil"
	}
}

localStorage.data_employer = JSON.stringify(data_employer);
localStorage.data_employer; // "{"name":"Turbosite","phones":["4003-2322","4062-1020","0800 888 2322"],"location":{"city":"Belo Horizonte","state":"Minas Gerais","country":"Brasil"}}"</pre>
<p>&nbsp;</p>
<p>Como agora é uma string, não pode ser trabalhada como um objeto, mas, basta agora utilizar a JSON.parse que novamente será um objeto manipulável, exemplo:</p>
<pre class="top-margin:20 bottom-margin:20 left-set:true left-margin:20 right-set:true right-margin:20 whitespace-before:2 whitespace-after:2 lang:js decode:true ">data_employer = JSON.parse(localStorage.data_employer); // Object {name: "Turbosite", phones: Array[3], location: Object}</pre>
<p>&nbsp;</p>
<p>Muito simples e tranquilo de trabalhar e como a própria W3C disse, mais seguro e rápido, nada de sobrecarregar servidores com COOKIES gigantescos. Dicas e comentários são sempre bem vindos, correções também.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
