{"id":3251,"date":"2021-09-20T20:00:00","date_gmt":"2021-09-20T23:00:00","guid":{"rendered":"https:\/\/felipemateus.com\/?p=3251"},"modified":"2026-06-13T17:44:41","modified_gmt":"2026-06-13T20:44:41","slug":"web-storage-api","status":"publish","type":"post","link":"https:\/\/felipemateus.com\/en\/blog\/2021\/09\/web-storage-api","title":{"rendered":"Web Storage API: guia de localStorage e sessionStorage em JavaScript"},"content":{"rendered":"<p class=\"wp-block-paragraph\">A Web Storage API \u00e9 uma API do navegador que permite armazenar dados localmente em formato chave\/valor usando <code>localStorage<\/code> and <code>sessionStorage<\/code>. Ela \u00e9 muito usada em aplica\u00e7\u00f5es web para salvar prefer\u00eancias, estados de interface, formul\u00e1rios tempor\u00e1rios e dados simples diretamente no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na pr\u00e1tica, ela ajuda quem desenvolve com JavaScript a guardar informa\u00e7\u00f5es no pr\u00f3prio navegador sem enviar esses dados em todas as requisi\u00e7\u00f5es HTTP, como acontece com cookies comuns.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Por que usar Web Storage em vez de cookies?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cookies continuam \u00fateis, especialmente quando uma informa\u00e7\u00e3o precisa ser enviada ao servidor, como em sess\u00f5es, autentica\u00e7\u00e3o e prefer\u00eancias que dependem do backend. Mas nem todo dado local precisa viajar a cada requisi\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O Web Storage \u00e9 indicado para dados simples usados no lado do cliente, como tema claro ou escuro, filtros de interface, rascunhos tempor\u00e1rios e estados que ajudam a melhorar a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Greater capacity:<\/strong> em geral, cerca de 5MB por origem, dependendo do navegador.<\/li>\n\n\n\n<li><strong>Menos tr\u00e1fego:<\/strong> os dados n\u00e3o s\u00e3o enviados automaticamente ao servidor.<\/li>\n\n\n\n<li><strong>API simples:<\/strong> os m\u00e9todos principais s\u00e3o nativos do JavaScript e f\u00e1ceis de usar.<\/li>\n<\/ul>\n\n\n\n<script data-wp-block-html=\"js\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2130373218745562\"\n     crossorigin=\"anonymous\">\n<\/script>\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2130373218745562\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-2130373218745562\"\n     data-ad-slot=\"9102161713\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Diferen\u00e7a entre localStorage, sessionStorage e cookies<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Recurso<\/th><th>localStorage<\/th><th>sessionStorage<\/th><th>Cookies<\/th><\/tr><\/thead><tbody><tr><td>Dura\u00e7\u00e3o<\/td><td>Permanece ap\u00f3s fechar o navegador<\/td><td>Apaga ao fechar a aba ou sess\u00e3o<\/td><td>Depende da data de expira\u00e7\u00e3o<\/td><\/tr><tr><td>Enviado ao servidor<\/td><td>No<\/td><td>No<\/td><td>Sim, em requisi\u00e7\u00f5es HTTP<\/td><\/tr><tr><td>Capacidade<\/td><td>Cerca de 5MB, dependendo do navegador<\/td><td>Cerca de 5MB, dependendo do navegador<\/td><td>Cerca de 4KB<\/td><\/tr><tr><td>Uso comum<\/td><td>Prefer\u00eancias, tema, estados locais<\/td><td>Formul\u00e1rios, checkout, fluxos tempor\u00e1rios<\/td><td>Sess\u00e3o, autentica\u00e7\u00e3o, rastreamento e prefer\u00eancias<\/td><\/tr><tr><td>Acesso via JavaScript<\/td><td>Yes<\/td><td>Yes<\/td><td>Sim, exceto cookies HttpOnly<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Na pr\u00e1tica, <code>localStorage<\/code> and <code>sessionStorage<\/code> s\u00e3o mais indicados para dados usados apenas no navegador. Cookies continuam importantes quando a informa\u00e7\u00e3o precisa ser enviada ao servidor, como em autentica\u00e7\u00e3o e sess\u00f5es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como usar localStorage em JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>localStorage<\/code> mant\u00e9m os dados salvos mesmo depois que o usu\u00e1rio fecha a aba ou o navegador. Os dados s\u00f3 s\u00e3o removidos por c\u00f3digo, limpeza manual do navegador ou regras da pr\u00f3pria aplica\u00e7\u00e3o.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-js\">\/\/ salvar dado\nlocalStorage.setItem(\"tema\", \"escuro\");\n\/\/ recuperar dado\nconst tema = localStorage.getItem(\"tema\");\n\/\/ remover dado espec\u00edfico\nlocalStorage.removeItem(\"tema\");\n\/\/ limpar todos os dados do localStorage\nlocalStorage.clear();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Como usar sessionStorage em JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>sessionStorage<\/code> funciona melhor para dados tempor\u00e1rios. Ele mant\u00e9m as informa\u00e7\u00f5es apenas enquanto a aba ou sess\u00e3o est\u00e1 aberta, por isso \u00e9 \u00fatil em fluxos como checkout, formul\u00e1rios em etapas e estados transit\u00f3rios.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-js\">\/\/ salvar dado tempor\u00e1rio\nsessionStorage.setItem(\"etapa\", \"checkout\");\n\/\/ recuperar dado tempor\u00e1rio\nconst etapa = sessionStorage.getItem(\"etapa\");\n\/\/ remover dado tempor\u00e1rio\nsessionStorage.removeItem(\"etapa\");\n\/\/ limpar dados da sess\u00e3o\nsessionStorage.clear();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9todos principais: setItem, getItem, removeItem e clear<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">As duas interfaces usam os mesmos m\u00e9todos principais. A diferen\u00e7a est\u00e1 no tempo de vida dos dados salvos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>setItem(chave, valor)<\/code>: salva um valor em uma chave.<\/li>\n\n\n\n<li><code>getItem(chave)<\/code>: recupera o valor salvo.<\/li>\n\n\n\n<li><code>removeItem(chave)<\/code>: remove um item espec\u00edfico.<\/li>\n\n\n\n<li><code>clear()<\/code>: remove todos os dados daquela storage.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>clear()<\/code> com cuidado, porque ele apaga todos os dados salvos naquela \u00e1rea de armazenamento. Em aplica\u00e7\u00f5es maiores, isso pode afetar outras partes do sistema.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2130373218745562\" crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-2130373218745562\" data-ad-slot=\"2655187724\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Como salvar objetos no localStorage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O Web Storage armazena valores como texto. Por isso, para salvar objetos ou arrays, \u00e9 necess\u00e1rio converter os dados com <code>JSON.stringify<\/code> e recuperar com <code>JSON.parse<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-js\">const usuario = {\n  nome: \"Felipe\",\n  tema: \"escuro\"\n};\nlocalStorage.setItem(\"usuario\", JSON.stringify(usuario));\nconst usuarioSalvo = JSON.parse(localStorage.getItem(\"usuario\"));\nconsole.log(usuarioSalvo.nome);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de usar <code>JSON.parse<\/code>, \u00e9 recomend\u00e1vel verificar se o valor existe para evitar erro ao tentar converter um valor nulo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-js\">const dados = localStorage.getItem(\"usuario\");\nif (dados) {\n  const usuario = JSON.parse(dados);\n  console.log(usuario);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">O que n\u00e3o salvar no Web Storage<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Apesar de \u00fatil, o Web Storage n\u00e3o deve ser usado para guardar senhas, dados banc\u00e1rios, documentos pessoais ou informa\u00e7\u00f5es sens\u00edveis. Como <code>localStorage<\/code> and <code>sessionStorage<\/code> podem ser acessados via JavaScript, uma falha de XSS pode expor os dados armazenados no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para autentica\u00e7\u00e3o, avalie o contexto da aplica\u00e7\u00e3o. Em muitos casos, cookies <code>HttpOnly<\/code>, <code>Secure<\/code> and <code>SameSite<\/code> podem ser mais adequados para dados sens\u00edveis relacionados \u00e0 sess\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Erros comuns ao usar localStorage e sessionStorage<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Salvar objetos sem usar <code>JSON.stringify<\/code>.<\/li>\n\n\n\n<li>Usar <code>JSON.parse<\/code> sem verificar se o valor existe.<\/li>\n\n\n\n<li>Salvar dados sens\u00edveis no navegador.<\/li>\n\n\n\n<li>Usar <code>localStorage<\/code> para dados que deveriam expirar.<\/li>\n\n\n\n<li>Usar <code>sessionStorage<\/code> esperando que os dados continuem ap\u00f3s fechar a aba.<\/li>\n\n\n\n<li>Usar <code>localStorage.clear()<\/code> e apagar dados de outras partes da aplica\u00e7\u00e3o.<\/li>\n\n\n\n<li>Esquecer que os dados ficam dispon\u00edveis apenas no navegador do usu\u00e1rio.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Entender a Web Storage API \u00e9 importante para quem desenvolve aplica\u00e7\u00f5es web em JavaScript, especialmente quando \u00e9 preciso salvar prefer\u00eancias, estados de interface ou dados tempor\u00e1rios diretamente no navegador.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>localStorage<\/code> \u00e9 \u00fatil para dados persistentes no navegador, <code>sessionStorage<\/code> funciona melhor para dados tempor\u00e1rios da sess\u00e3o, e cookies continuam importantes quando a informa\u00e7\u00e3o precisa ser enviada ao servidor.<\/p>\n\n\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2130373218745562\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-2130373218745562\"\n     data-ad-slot=\"3054979680\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Perguntas frequentes sobre Web Storage API<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">O que \u00e9 Web Storage API?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A Web Storage API permite armazenar dados no navegador em formato chave\/valor usando <code>localStorage<\/code> and <code>sessionStorage<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qual a diferen\u00e7a entre localStorage e sessionStorage?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O <code>localStorage<\/code> mant\u00e9m os dados mesmo ap\u00f3s fechar o navegador. O <code>sessionStorage<\/code> mant\u00e9m os dados apenas enquanto a aba ou sess\u00e3o estiver aberta.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">localStorage substitui cookies?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e3o exatamente. <code>localStorage<\/code> pode substituir cookies em alguns casos de armazenamento local, mas cookies ainda s\u00e3o usados para sess\u00f5es, autentica\u00e7\u00e3o e comunica\u00e7\u00e3o com o servidor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Posso salvar objetos no localStorage?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sim, mas \u00e9 preciso converter o objeto para texto usando <code>JSON.stringify<\/code> e recuperar com <code>JSON.parse<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">localStorage \u00e9 seguro para salvar tokens?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Depende do contexto, mas n\u00e3o \u00e9 recomendado salvar dados sens\u00edveis no <code>localStorage<\/code> se a aplica\u00e7\u00e3o tiver risco de XSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">sessionStorage apaga quando fecha o navegador?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sim. O <code>sessionStorage<\/code> apaga os dados quando a aba ou sess\u00e3o \u00e9 encerrada.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Links relacionados<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea est\u00e1 estudando desenvolvimento web, tamb\u00e9m pode gostar do texto sobre <a href=\"https:\/\/felipemateus.com\/en\/blog\/2022\/03\/pwa-progressive-web-application\">PWA e aplica\u00e7\u00f5es web progressivas<\/a>, j\u00e1 que armazenamento local e funcionamento offline costumam aparecer no mesmo contexto de aplica\u00e7\u00f5es modernas em JavaScript.<\/p>","protected":false},"excerpt":{"rendered":"<p>Web Storage API. Learn more about the api that replaces cookies as the main way of storing information in the browser.<\/p>","protected":false},"author":2,"featured_media":3446,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAowhPjFCw:productID":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1935],"tags":[1073,1072,1054,1053,1063,1074],"class_list":["post-3251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web-e-programacao","tag-cookies","tag-html5","tag-javascript","tag-programacao","tag-site","tag-webstorage"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Guia Pr\u00e1tico de Web Storage: LocalStorage vs SessionStorage<\/title>\n<meta name=\"description\" content=\"Aprenda como implementar LocalStorage e SessionStorage de forma segura e eficiente nos seus projetos web. Veja exemplos reais.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guia Pr\u00e1tico de Web Storage: LocalStorage vs SessionStorage\" \/>\n<meta property=\"og:description\" content=\"Aprenda como implementar LocalStorage e SessionStorage de forma segura e eficiente nos seus projetos web. Veja exemplos reais.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api\" \/>\n<meta property=\"og:site_name\" content=\"Felipe Mateus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/eufelipemateus\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/eufelipemateus\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-20T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-13T20:44:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1207\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Felipe Mateus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@eufelipemateus\" \/>\n<meta name=\"twitter:site\" content=\"@eufelipemateus\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Felipe Mateus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api\"},\"author\":{\"name\":\"Felipe Mateus\",\"@id\":\"https:\\\/\\\/felipemateus.com\\\/#\\\/schema\\\/person\\\/5ca2279426b9f93497fbf68a6e2577b6\"},\"headline\":\"Web Storage API: guia de localStorage e sessionStorage em JavaScript\",\"datePublished\":\"2021-09-20T23:00:00+00:00\",\"dateModified\":\"2026-06-13T20:44:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api\"},\"wordCount\":926,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/felipemateus.com\\\/#\\\/schema\\\/person\\\/5ca2279426b9f93497fbf68a6e2577b6\"},\"image\":{\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/web-storage-api.jpg\",\"keywords\":[\"cookies\",\"html5\",\"Javascript\",\"Programa\u00e7\u00e3o\",\"Site\",\"WebStorage\"],\"articleSection\":[\"Desenvolvimento Web e Programa\u00e7\u00e3o\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api\",\"url\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api\",\"name\":\"Guia Pr\u00e1tico de Web Storage: LocalStorage vs SessionStorage\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/felipemateus.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/web-storage-api.jpg\",\"datePublished\":\"2021-09-20T23:00:00+00:00\",\"dateModified\":\"2026-06-13T20:44:41+00:00\",\"description\":\"Aprenda como implementar LocalStorage e SessionStorage de forma segura e eficiente nos seus projetos web. Veja exemplos reais.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#primaryimage\",\"url\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/web-storage-api.jpg\",\"contentUrl\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/web-storage-api.jpg\",\"width\":2000,\"height\":1207,\"caption\":\"web storage api\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mundoazul.blog\\\/2021\\\/09\\\/web-storage-api#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/felipemateus.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento Web e Programa\u00e7\u00e3o\",\"item\":\"https:\\\/\\\/felipemateus.com\\\/blog\\\/topicos\\\/desenvolvimento-web-e-programacao\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Storage API: guia de localStorage e sessionStorage em JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/felipemateus.com\\\/#website\",\"url\":\"https:\\\/\\\/felipemateus.com\\\/\",\"name\":\"Felipe Mateus @felipemateus\",\"description\":\"Seja Bem-Vindo ao meu mundo azul.\",\"publisher\":{\"@id\":\"https:\\\/\\\/felipemateus.com\\\/#\\\/schema\\\/person\\\/5ca2279426b9f93497fbf68a6e2577b6\"},\"alternateName\":\"eufelipemateus\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/felipemateus.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/felipemateus.com\\\/#\\\/schema\\\/person\\\/5ca2279426b9f93497fbf68a6e2577b6\",\"name\":\"Felipe Mateus Rocha Martins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/FELIPE-2-1024x1024.png\",\"url\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/FELIPE-2-1024x1024.png\",\"contentUrl\":\"https:\\\/\\\/felipemateus.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/FELIPE-2-1024x1024.png\",\"width\":1024,\"height\":1024,\"caption\":\"Felipe Mateus\"},\"sameAs\":[\"https:\\\/\\\/felipemateus.com\",\"https:\\\/\\\/www.facebook.com\\\/eufelipemateus\",\"https:\\\/\\\/www.instagram.com\\\/eufelipemateus\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/eufelipemateus\\\/\",\"https:\\\/\\\/x.com\\\/eufelipemateus\",\"https:\\\/\\\/github.com\\\/eufelipemateus\",\"https:\\\/\\\/soundcloud.com\\\/eufelipemateus\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guia Pr\u00e1tico de Web Storage: LocalStorage vs SessionStorage","description":"A practical guide to using LocalStorage and SessionStorage in JavaScript, with examples and common use cases for web applications.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api","og_locale":"en_US","og_type":"article","og_title":"Guia Pr\u00e1tico de Web Storage: LocalStorage vs SessionStorage","og_description":"Aprenda como implementar LocalStorage e SessionStorage de forma segura e eficiente nos seus projetos web. Veja exemplos reais.","og_url":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api","og_site_name":"Felipe Mateus","article_publisher":"https:\/\/www.facebook.com\/eufelipemateus","article_author":"https:\/\/www.facebook.com\/eufelipemateus","article_published_time":"2021-09-20T23:00:00+00:00","article_modified_time":"2026-06-13T20:44:41+00:00","og_image":[{"width":2000,"height":1207,"url":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg","type":"image\/jpeg"}],"author":"Felipe Mateus","twitter_card":"summary_large_image","twitter_creator":"@eufelipemateus","twitter_site":"@eufelipemateus","twitter_misc":{"Written by":"Felipe Mateus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#article","isPartOf":{"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api"},"author":{"name":"Felipe Mateus","@id":"https:\/\/felipemateus.com\/#\/schema\/person\/5ca2279426b9f93497fbf68a6e2577b6"},"headline":"Web Storage API: guia de localStorage e sessionStorage em JavaScript","datePublished":"2021-09-20T23:00:00+00:00","dateModified":"2026-06-13T20:44:41+00:00","mainEntityOfPage":{"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api"},"wordCount":926,"commentCount":0,"publisher":{"@id":"https:\/\/felipemateus.com\/#\/schema\/person\/5ca2279426b9f93497fbf68a6e2577b6"},"image":{"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#primaryimage"},"thumbnailUrl":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg","keywords":["cookies","html5","Javascript","Programa\u00e7\u00e3o","Site","WebStorage"],"articleSection":["Desenvolvimento Web e Programa\u00e7\u00e3o"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api","url":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api","name":"Guia Pr\u00e1tico de Web Storage: LocalStorage vs SessionStorage","isPartOf":{"@id":"https:\/\/felipemateus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#primaryimage"},"image":{"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#primaryimage"},"thumbnailUrl":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg","datePublished":"2021-09-20T23:00:00+00:00","dateModified":"2026-06-13T20:44:41+00:00","description":"A practical guide to using LocalStorage and SessionStorage in JavaScript, with examples and common use cases for web applications.","breadcrumb":{"@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mundoazul.blog\/2021\/09\/web-storage-api"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#primaryimage","url":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg","contentUrl":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg","width":2000,"height":1207,"caption":"web storage api"},{"@type":"BreadcrumbList","@id":"https:\/\/mundoazul.blog\/2021\/09\/web-storage-api#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/felipemateus.com\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento Web e Programa\u00e7\u00e3o","item":"https:\/\/felipemateus.com\/blog\/topicos\/desenvolvimento-web-e-programacao"},{"@type":"ListItem","position":3,"name":"Web Storage API: guia de localStorage e sessionStorage em JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/felipemateus.com\/#website","url":"https:\/\/felipemateus.com\/","name":"Felipe Mateus @felipemateus","description":"Welcome to my blue world.","publisher":{"@id":"https:\/\/felipemateus.com\/#\/schema\/person\/5ca2279426b9f93497fbf68a6e2577b6"},"alternateName":"eufelipemateus","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/felipemateus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/felipemateus.com\/#\/schema\/person\/5ca2279426b9f93497fbf68a6e2577b6","name":"Felipe Mateus Rocha Martins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2023\/04\/FELIPE-2-1024x1024.png","url":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2023\/04\/FELIPE-2-1024x1024.png","contentUrl":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2023\/04\/FELIPE-2-1024x1024.png","width":1024,"height":1024,"caption":"Felipe Mateus"},"sameAs":["https:\/\/felipemateus.com","https:\/\/www.facebook.com\/eufelipemateus","https:\/\/www.instagram.com\/eufelipemateus","https:\/\/www.linkedin.com\/in\/eufelipemateus\/","https:\/\/x.com\/eufelipemateus","https:\/\/github.com\/eufelipemateus","https:\/\/soundcloud.com\/eufelipemateus"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/felipemateus.b-cdn.net\/wp-content\/uploads\/2021\/09\/web-storage-api.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pb1Prx-Qr","jetpack-related-posts":[{"id":4218,"url":"https:\/\/felipemateus.com\/en\/blog\/2022\/03\/pwa-progressive-web-application","url_meta":{"origin":3251,"position":0},"title":"What is PWA (Progressive Web Application)?","author":"Felipe Mateus","date":"31\/03\/2022","format":false,"excerpt":"What is PWA? A type of web application that looks like a native app but don&#039;t know more.","rel":"","context":"In &quot;Desenvolvimento Web e Programa\u00e7\u00e3o&quot;","block_context":{"text":"Desenvolvimento Web e Programa\u00e7\u00e3o","link":"https:\/\/felipemateus.com\/en\/blog\/topics\/web-development-and-programming"},"img":{"alt_text":"pwa logo","src":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/03\/pwa-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/03\/pwa-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/03\/pwa-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/03\/pwa-logo.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/03\/pwa-logo.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/03\/pwa-logo.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":53121,"url":"https:\/\/felipemateus.com\/en\/blog\/2026\/03\/wordpress-theme-improving-performance","url_meta":{"origin":3251,"position":1},"title":"Why I created my own WordPress theme.","author":"Felipe Mateus","date":"05\/03\/2026","format":false,"excerpt":"I created my own theme for my website to improve performance and reduce reliance on general-purpose plugins that weigh down the site. In the text, I detail the changes I made.","rel":"","context":"In &quot;Desenvolvimento Web e Programa\u00e7\u00e3o&quot;","block_context":{"text":"Desenvolvimento Web e Programa\u00e7\u00e3o","link":"https:\/\/felipemateus.com\/en\/blog\/topics\/web-development-and-programming"},"img":{"alt_text":"Imagem print pagespeed","src":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2026\/03\/pagespeed.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2026\/03\/pagespeed.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2026\/03\/pagespeed.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2026\/03\/pagespeed.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2026\/03\/pagespeed.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2026\/03\/pagespeed.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":3818,"url":"https:\/\/felipemateus.com\/en\/blog\/2021\/12\/mysql-saving-files-with-nestjs-mysql","url_meta":{"origin":3251,"position":2},"title":"mysql: Saving files in mysql with nestjs","author":"Felipe Mateus","date":"12\/12\/2021","format":false,"excerpt":"This article explains how to upload files to a MySQL database.","rel":"","context":"In &quot;Desenvolvimento Web e Programa\u00e7\u00e3o&quot;","block_context":{"text":"Desenvolvimento Web e Programa\u00e7\u00e3o","link":"https:\/\/felipemateus.com\/en\/blog\/topics\/web-development-and-programming"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2021\/12\/upload-g4ec6e5c76_1920.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2021\/12\/upload-g4ec6e5c76_1920.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2021\/12\/upload-g4ec6e5c76_1920.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2021\/12\/upload-g4ec6e5c76_1920.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2021\/12\/upload-g4ec6e5c76_1920.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2021\/12\/upload-g4ec6e5c76_1920.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":8859,"url":"https:\/\/felipemateus.com\/en\/blog\/2023\/04\/which-information-technology-course-has-the-least-math","url_meta":{"origin":3251,"position":3},"title":"Which Information Technology course has the least math?","author":"Felipe Mateus","date":"11\/04\/2023","format":false,"excerpt":"This article explores Information Technology (IT) courses that require less math. Although mathematics is fundamental to IT, some courses require less mathematical knowledge than others. Courses include Systems Analysis and Development (ADS), Information Technology Management (GTI), Computer Network Technology,\u2026","rel":"","context":"In &quot;Tecnologia, Carreira e Mercado&quot;","block_context":{"text":"Tecnologia, Carreira e Mercado","link":"https:\/\/felipemateus.com\/en\/blog\/topics\/technology"},"img":{"alt_text":"Curso de tecnologia","src":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2023\/04\/Educacao-Cursos-tecnologia.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2023\/04\/Educacao-Cursos-tecnologia.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2023\/04\/Educacao-Cursos-tecnologia.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2023\/04\/Educacao-Cursos-tecnologia.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":8252,"url":"https:\/\/felipemateus.com\/en\/blog\/2022\/08\/what-is-the-best-programming-language-to-create-websites","url_meta":{"origin":3251,"position":4},"title":"What is the best programming language to create websites?","author":"Felipe Mateus","date":"01\/08\/2022","format":false,"excerpt":"Learn more which is the best programming languages for the website.","rel":"","context":"In &quot;Desenvolvimento Web e Programa\u00e7\u00e3o&quot;","block_context":{"text":"Desenvolvimento Web e Programa\u00e7\u00e3o","link":"https:\/\/felipemateus.com\/en\/blog\/topics\/web-development-and-programming"},"img":{"alt_text":"Qual \u00e9 Linguagem de Programa\u00e7\u00e3o para criar sites?","src":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/07\/programming-1920.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/07\/programming-1920.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/07\/programming-1920.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/07\/programming-1920.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/07\/programming-1920.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/07\/programming-1920.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":8692,"url":"https:\/\/felipemateus.com\/en\/blog\/2022\/12\/technology-market-professions","url_meta":{"origin":3251,"position":5},"title":"Technology Market Professions for the New Year.","author":"Felipe Mateus","date":"29\/12\/2022","format":false,"excerpt":"This is a text that presents some professions in the technology market that should be on the rise in 2023, as well as some courses for those who want to qualify. The text begins by showing that, although in the short term the technology market is going through a small crisis, in the long term\u2026","rel":"","context":"In &quot;Tecnologia, Carreira e Mercado&quot;","block_context":{"text":"Tecnologia, Carreira e Mercado","link":"https:\/\/felipemateus.com\/en\/blog\/topics\/technology"},"img":{"alt_text":"Mercado de tecnologia","src":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/12\/cover.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/12\/cover.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/12\/cover.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/12\/cover.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/12\/cover.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/felipemateus.com\/wp-content\/uploads\/2022\/12\/cover.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"jetpack_likes_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/posts\/3251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/comments?post=3251"}],"version-history":[{"count":27,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/posts\/3251\/revisions"}],"predecessor-version":[{"id":84283,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/posts\/3251\/revisions\/84283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/media\/3446"}],"wp:attachment":[{"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/media?parent=3251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/categories?post=3251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/felipemateus.com\/en\/wp-json\/wp\/v2\/tags?post=3251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}