{"id":3925,"date":"2014-12-10T10:01:35","date_gmt":"2014-12-10T12:01:35","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3925"},"modified":"2014-12-10T10:01:35","modified_gmt":"2014-12-10T12:01:35","slug":"html5-web-storage-mais-seguro-que-cookies","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/html5-web-storage-mais-seguro-que-cookies\/","title":{"rendered":"HTML5 Web Storage &#8211; Mais seguro que Cookies"},"content":{"rendered":"<p>HTML 5 Web Storage \u00e9 uma alternativa para armazenar dados e os persistirem do lado do cliente. Ele \u00e9 mais seguro e confi\u00e1vel que os Cookies, al\u00e9m de n\u00e3o serem enviados em todas as requisi\u00e7\u00f5es para o servidor, em consequ\u00eancia, em aplica\u00e7\u00f5es de grande porte isto economizar\u00e1 muitos dados trafegados.<\/p>\n<p>Uma cita\u00e7\u00e3o da W3C Schools que vale nossa aten\u00e7\u00e3o, ela \u00e9 mencionada comparando com os Cookies:<\/p>\n<blockquote><p>Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.<\/p><\/blockquote>\n<p>Fonte:\u00a0<a href=\"http:\/\/www.w3schools.com\/html\/html5_webstorage.asp\">http:\/\/www.w3schools.com\/html\/html5_webstorage.asp<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>N\u00f3s 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\u00a0para suprir esta necessidade, mas, infelizmente publicamos uma tecnologia que est\u00e1 <span style=\"color: #ff0000;\">obsoleta <span style=\"color: #000000;\">(gafe nossa)<\/span><\/span>\u00a0e por isso n\u00e3o indicamos a utiliz\u00e1-la.<\/p>\n<p>&nbsp;<\/p>\n<p>A vantagem de utilizarmos o HTML 5 Web Storage \u00e9 a facilidade, a compatibilidade j\u00e1 que, ele \u00e9 suportado na maiores dos browser e por incr\u00edvel que pare\u00e7a, a partir do IE8 voc\u00ea pode utiliz\u00e1-lo (isto chega a nos surpreender).<\/p>\n<p>Testados e suportados:\u00a0 <img loading=\"lazy\" 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 loading=\"lazy\" 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 loading=\"lazy\" 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>\n<p>Um detalhe que deve ser conhecido \u00e9, o Local Storage \u00e9 por dom\u00ednio e os dados podem ser armazenados\/acessados por todas as p\u00e1ginas do mesmo.<\/p>\n<p>Bom, chega de explica\u00e7\u00f5es, vamos a pr\u00e1tica.<\/p>\n<p>&nbsp;<\/p>\n<h2>M\u00e9todos utilizados<\/h2>\n<p>localStorage.setItem(name, value);<br \/>\nlocalStorage.getItem(name);<br \/>\nlocalStorage.clear();<br \/>\nlocalStorage.length;<\/p>\n<p>&nbsp;<\/p>\n<h2>Testando se o Browser suporta Web Storage<\/h2>\n<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\") {\n    \/\/ C\u00f3digo para localStorage\/sessionStorage\n} else {\n    \/\/ Implemente outra solu\u00e7\u00e3o, est\u00e1 n\u00e3o funciona. :\/\n}<\/pre>\n<p>&nbsp;<\/p>\n<blockquote><p><strong>Observa\u00e7\u00e3o<\/strong>: O Web Storage n\u00e3o armazena objetos e \u00a0arrays em JavaScript, por isto utilizamos o JSON.stringify e JSON.parse para converter os objetos de forma apropriada para armazenar.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2>Armazenando uma informa\u00e7\u00e3o<\/h2>\n<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\nlocalStorage.setItem(\"employer\", \"Turbosite\"); \t\/\/ Armazena o valor\nlocalStorage.getItem(\"employer\"); \t\t\/\/ Resgata o valor \"Turbosite\"\n\n\/\/ Forma comprimida\nlocalStorage.employer = \"Turbosite\";\t\t\/\/ Armazena o valor\nlocalStorage.employer; \t\t\t\t\/\/ Resgata o valor \"Turbosite\"<\/pre>\n<p>&nbsp;<\/p>\n<h2>Verificando o tamanho do Web Storage<\/h2>\n<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 )\nlocalStorage.length<\/pre>\n<p>&nbsp;<\/p>\n<h2>Removendo itens<\/h2>\n<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\nlocalStorage.removeItem(\"employer\");\n\n\/\/ Remover um item via Javascript nativo\ndelete(localStorage.employer);<\/pre>\n<p>&nbsp;<\/p>\n<h2>Zerando o Web Storage<\/h2>\n<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\nlocalStorage.clear();\t\t\t\/\/ Reseta os dados\n<\/pre>\n<h2><\/h2>\n<h2>Armazenando objetos em Javascript<\/h2>\n<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 = {\n\t\"name\": \"Turbosite\",\n\t\"phones\" : [\n\t\t\"4003-2322\",\n\t\t\"4062-1020\",\n\t\t\"0800 888 2322\"\n\t],\n\t\"location\": {\n\t\t\"city\": \"Belo Horizonte\",\n\t\t\"state\": \"Minas Gerais\",\n\t\t\"country\": \"Brasil\"\n\t}\n}\n\nlocalStorage.data_employer = data_employer;\nlocalStorage.data_employer; \/\/ Resultado: \"[object Object]\"<\/pre>\n<p>&nbsp;<\/p>\n<p>Como podem ver, o resultado n\u00e3o 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>\n<p>Uma solu\u00e7\u00e3o seria, converter o objeto para string e armazen\u00e1-lo, existe a fun\u00e7\u00e3o nativa JSON.stringify, desta forma ficaria:<\/p>\n<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 = {\n\t\"name\": \"Turbosite\",\n\t\"phones\" : [\n\t\t\"4003-2322\",\n\t\t\"4062-1020\",\n\t\t\"0800 888 2322\"\n\t],\n\t\"location\": {\n\t\t\"city\": \"Belo Horizonte\",\n\t\t\"state\": \"Minas Gerais\",\n\t\t\"country\": \"Brasil\"\n\t}\n}\n\nlocalStorage.data_employer = JSON.stringify(data_employer);\nlocalStorage.data_employer; \/\/ \"{\"name\":\"Turbosite\",\"phones\":[\"4003-2322\",\"4062-1020\",\"0800 888 2322\"],\"location\":{\"city\":\"Belo Horizonte\",\"state\":\"Minas Gerais\",\"country\":\"Brasil\"}}\"<\/pre>\n<p>&nbsp;<\/p>\n<p>Como agora \u00e9 uma string, n\u00e3o pode ser trabalhada como um objeto, mas, basta agora utilizar a JSON.parse que novamente ser\u00e1 um objeto manipul\u00e1vel, exemplo:<\/p>\n<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>\n<p>&nbsp;<\/p>\n<p>Muito simples e tranquilo de trabalhar e como a pr\u00f3pria W3C disse, mais seguro e r\u00e1pido, nada de sobrecarregar servidores com COOKIES gigantescos. Dicas e coment\u00e1rios s\u00e3o sempre bem vindos, corre\u00e7\u00f5es tamb\u00e9m.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML 5 Web Storage \u00e9 uma alternativa para armazenar dados e os persistirem do lado do cliente. Ele \u00e9 mais seguro e confi\u00e1vel que os Cookies.<\/p>\n","protected":false},"author":1,"featured_media":3926,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,15,28],"tags":[56,333,657],"class_list":["post-3925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-dicas","category-javascript","category-tutoriais","tag-armazenando-dados-h5ml","tag-html-5-web-storage","tag-web-storage"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3925"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3925\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3926"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}