![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/09\/Wordle-as-an-example-of-localStorage-skb0q-1024x528.jpeg\")
<\/figure>\n\n\n\nA resposta di\u00e1ria tamb\u00e9m \u00e9 armazenada em localStorage, para que voc\u00ea possa jogar o jogo offline ap\u00f3s abrir a p\u00e1gina.<\/p>\n\n\n\n
O recurso localStorage pode ser \u00fatil em v\u00e1rios casos de uso. Este artigo explicar\u00e1 mais sobre localStorage e como ele funciona, para que voc\u00ea possa us\u00e1-lo com seus aplicativos. <\/p>\n\n\n\n
Por que voc\u00ea precisa do localStorage?<\/strong><\/p>\n\n\n\n H\u00e1 v\u00e1rios recursos \u00fateis no localStorage, incluindo a capacidade de armazenar informa\u00e7\u00f5es do usu\u00e1rio e permitir que voc\u00ea trabalhe offline conforme necess\u00e1rio.<\/p>\n\n\n\n LocalStorage funciona de forma semelhante aos cookies. No entanto, ele pode armazenar uma quantidade maior de dados. O armazenamento dispon\u00edvel no Google Chrome \u00e9 de 5 MB no m\u00e1ximo por dom\u00ednio, enquanto o localStorage do Opera \u00e9 de 3 MB, mas pode ser aumentado.<\/p>\n\n\n\n Como a Internet pode n\u00e3o estar acess\u00edvel de forma consistente em todos os lugares, o localStorage permite que voc\u00ea coloque seu trabalho offline , assim como no Wordle.<\/p>\n\n\n\n Voc\u00ea tamb\u00e9m pode armazenar o estado da sua p\u00e1gina, como por exemplo temas claro ou escuro, mas tamb\u00e9m com diferentes constrastes para ajudar deficientes visuais. Esta prefer\u00eancia n\u00e3o precisa est\u00e1 em um sistema com banco de dados mas sim no localStorage. <\/p>\n\n\n\n Benef\u00edcios do localStorage<\/strong><\/p>\n\n\n\n O uso do localStorage oferece v\u00e1rios benef\u00edcios, incluindo o seguinte:<\/p>\n\n\n\n Antipadr\u00e3o: Salvar tokens de acesso<\/strong><\/p>\n\n\n\n Existe uma pr\u00e1tica do uso de localStorage para armazenar tokens de acesso, como tokens JWT, no lado do usu\u00e1rio para que ele permane\u00e7a conectado por um per\u00edodo de tempo especificado.<\/p>\n\n\n\n Isso \u00e9 inseguro e nunca deve ser feito, pois \u00e9 acess\u00edvel usando JavaScript no mesmo dom\u00ednio. Isso significa que qualquer c\u00f3digo JavaScript em execu\u00e7\u00e3o na p\u00e1gina pode acessar o armazenamento, deixando seu aplicativo vulner\u00e1vel a ataques de cross-site scripting (XSS).<\/p>\n\n\n\n Os aplicativos tamb\u00e9m costumam usar scripts de terceiros para obter an\u00e1lises ou an\u00fancios e, se at\u00e9 mesmo um \u00fanico script for comprometido, voc\u00ea corre o risco de ser hackeado.<\/p>\n\n\n\n Ent\u00e3o evite utilizar o localStorage para armazenar dados sens\u00edveis.<\/p>\n\n\n\n Casos de uso de armazenamento local<\/strong><\/p>\n\n\n\n A seguir est\u00e3o alguns casos de uso comuns para localStorage.<\/strong><\/p>\n\n\n\n Salvando dados de formul\u00e1rios parcialmente enviados<\/strong><\/p>\n\n\n\n Se um usu\u00e1rio estiver preenchendo um formul\u00e1rio longo, localStorage pode ser \u00fatil para armazenar dados parciais. Mesmo que a internet seja desconectada entre iniciar o formul\u00e1rio e envi\u00e1-lo, o usu\u00e1rio n\u00e3o perder\u00e1 suas entradas e poder\u00e1 continuar de onde parou.<\/p>\n\n\n\n Cache<\/strong><\/p>\n\n\n\n De acordo com uma an\u00e1lise de 2022 da Portent , a taxa de convers\u00e3o do cliente pode aumentar em 2,5 vezes quando sua p\u00e1gina \u00e9 carregada em menos de cinco segundos. Construir um site lento n\u00e3o \u00e9 mais uma op\u00e7\u00e3o. Mas quando um usu\u00e1rio final solicita dados espec\u00edficos e a solicita\u00e7\u00e3o precisa passar pela rede com lat\u00eancia associada, o armazenamento em cache pode ser um salva-vidas. O localStorage pode ser usado para armazenar em cache um site ou para armazenar dados est\u00e1ticos para mostrar as informa\u00e7\u00f5es do cliente mesmo quando a p\u00e1gina estiver offline, e buscar os dados necess\u00e1rios quando a internet se reconectar.<\/p>\n\n\n\n Sincronizando dados entre guias<\/strong><\/p>\n\n\n\n Usando localStorage, um usu\u00e1rio pode abrir um site com um componente de timer<\/strong> em uma guia do navegador, iniciar o timer, abrir outra guia do mesmo site e sincronizar o timer entre as duas guias. Voc\u00ea tamb\u00e9m pode sincronizar m\u00fasicas ou seu player de v\u00eddeo entre as guias.<\/p>\n\n\n\n Dados pr\u00e9-preenchidos<\/strong><\/p>\n\n\n\n Voc\u00ea pode usar localStorage para armazenar uma vers\u00e3o pr\u00e9-preenchida do seu aplicativo. Quando um usu\u00e1rio visita seu aplicativo, ele imediatamente v\u00ea algo na tela e, em seguida, seu aplicativo pode fazer chamadas para o back-end para buscar novas informa\u00e7\u00f5es. Os sites de com\u00e9rcio eletr\u00f4nico geralmente usam localStorage para armazenar itens que o usu\u00e1rio visualizou e outros dados espec\u00edficos do usu\u00e1rio.<\/p>\n\n\n\n Executando opera\u00e7\u00f5es no localStorage<\/strong><\/p>\n\n\n\n Voc\u00ea tem alguns m\u00e9todos para escolher ao realizar opera\u00e7\u00f5es em localStorage. Eles s\u00e3o:<\/p>\n\n\n\n A seguir, mais detalhes sobre cada um.<\/p>\n\n\n\n Armazenando valores com setItem()<\/strong><\/p>\n\n\n\n O setItem<\/strong> m\u00e9todo \u00e9 usado para armazenar valores em localStorage. Este m\u00e9todo recebe dois par\u00e2metros: uma chave e um valor. A chave \u00e9 usada para buscar os dados posteriormente.<\/p>\n\n\n\n Aqui est\u00e1 um exemplo simples de como usar o setItem<\/strong> m\u00e9todo para armazenar dados:<\/p>\n\n\n\n Se voc\u00ea executar esse c\u00f3digo em um console do navegador, ele armazenar\u00e1 uma chave com o nome Dado e um valor “Dados salvo no localStorage”.<\/p>\n\n\n\n Depois de executar o c\u00f3digo, se voc\u00ea abrir a guia Aplicativos e clicar em localStorage , poder\u00e1 ver o dado salvo.<\/p>\n\n\n\n Observe que voc\u00ea s\u00f3 pode armazenar strings em localStorage. (No Firefox e no Chrome, os dados localStorage s\u00e3o armazenados em um banco de dados SQLite.) Se voc\u00ea deseja manter arrays ou objetos, uma maneira direta \u00e9 converter os dados em JSON usando o m\u00e9todo JSON.stringify.<\/p>\n\n\n\n Acessando itens com getItem()<\/strong><\/p>\n\n\n\n A API localStorage usa o getItem<\/strong> m\u00e9todo para recuperar dados. O m\u00e9todo recebe um \u00fanico argumento que \u00e9 a chave para os dados. Se os dados n\u00e3o forem encontrados, o m\u00e9todo retornar\u00e1 null.<\/p>\n\n\n\n A sintaxe do c\u00f3digo \u00e9 mostrada abaixo:<\/p>\n\n\n\n Removendo Item Espec\u00edfico com removeItem()<\/strong><\/p>\n\n\n\n Como o nome sugere, o removeItem<\/strong>() m\u00e9todo remove um par de valores-chave espec\u00edfico de localStorage. A sintaxe dos dados \u00e9 semelhante a getItem. Tamb\u00e9m recebe um \u00fanico par\u00e2metro, a chave do item, e retorna undefined se o item n\u00e3o estiver dispon\u00edvel.<\/p>\n\n\n\n Voc\u00ea pode verificar a guia Aplicativos das ferramentas de desenvolvimento do navegador para confirmar que a chave foi removida.<\/p>\n\n\n\n Excluindo todos os itens comclear()<\/strong><\/p>\n\n\n\n Se voc\u00ea deseja limpar localStorage de um dom\u00ednio espec\u00edfico, use o clear m\u00e9todo. Ele n\u00e3o recebe nenhum par\u00e2metro e remove todos os itens localStorage do dom\u00ednio.<\/p>\n\n\n\n Recuperando nomes de chave comkey()<\/strong><\/p>\n\n\n\n O key<\/strong> m\u00e9todo \u00e9 \u00fatil quando voc\u00ea deseja percorrer as chaves de localStorage. Leva um par\u00e2metro de um n\u00famero. O n\u00famero pode ser uma posi\u00e7\u00e3o de \u00edndice do item localStorage.<\/p>\n\n\n\n Aqui est\u00e1 um exemplo:<\/p>\n\n\n\n O valor retornado pode ser diferente se seu localStorage para o dom\u00ednio j\u00e1 tiver algum valor.<\/p>\n\n\n\n Monitorando eventos de armazenamento<\/strong>.<\/p>\n\n\n\n Para monitorar eventos relacionados ao localStorage com DOM, use o m\u00e9todo storage event. Coloc\u00e1-lo dentro de um window.addEventListener pode ajud\u00e1-lo a realizar opera\u00e7\u00f5es DOM ao invocar um evento de armazenamento.<\/p>\n\n\n\n Abaixo est\u00e1 um exemplo simples de escuta de storage eventos:<\/p>\n\n\n\n Sempre que uma altera\u00e7\u00e3o \u00e9 feita em localStorage, o c\u00f3digo define um HTML interno para o div com o ID app como Change Made. Nesse caso, um novo item \u00e9 adicionado ao localStorage para a nova janela e, ap\u00f3s gravar o valor em localStorage, a janela \u00e9 fechada.<\/p>\n\n\n\n Aqui est\u00e1 o HTML para o c\u00f3digo acima:<\/p>\n\n\n\n LocalStorage vs. SessionStorage<\/strong><\/p>\n\n\n\n LocalStorage e sessionStorage t\u00eam algumas semelhan\u00e7as. Por exemplo:<\/p>\n\n\n\n No entanto, existem v\u00e1rias diferen\u00e7as entre os dois. Uma \u00e9 a persist\u00eancia: os dados armazenados em localStorage persistem durante as sess\u00f5es. Abrir uma nova guia, visitar um novo dom\u00ednio ou fechar o navegador n\u00e3o limpar\u00e1 localStorage. Por outro lado, sessionStorage \u00e9 limpo sempre que uma sess\u00e3o termina. Abrir uma nova guia ou visitar um novo dom\u00ednio limpar\u00e1 a sess\u00e3o de um dom\u00ednio espec\u00edfico.<\/p>\n\n\n\n Outra diferen\u00e7a \u00e9 que, no caso de alguns navegadores, localStorage n\u00e3o funciona no modo de navega\u00e7\u00e3o an\u00f4nima, mas sessionStorage sim. Nesses casos, \u00e9 uma boa ideia escrever um wrapper para seu c\u00f3digo localStorage para usar sessionStorage.<\/p>\n\n\n\n LocalStorage vs. IndexedDB<\/strong><\/p>\n\n\n\n IndexedDB \u00e9 uma API para armazenar uma grande quantidade de dados estruturados, incluindo arquivos, no lado do cliente. Os dados armazenados usando IndexedDB tamb\u00e9m s\u00e3o persistentes e s\u00e3o armazenados at\u00e9 serem explicitamente limpos. IndexedDB tamb\u00e9m oferece um mecanismo interno para controle de vers\u00e3o de esquema.<\/p>\n\n\n\n IndexedDB oferece v\u00e1rios benef\u00edcios sobre localStorage. Por exemplo, IndexedDB n\u00e3o bloqueia o DOM quando usado com um trabalhador, ao contr\u00e1rio de localStorage. No entanto, localStorage \u00e9 um pouco mais r\u00e1pido que IndexedDB. A API do localStorage tamb\u00e9m \u00e9 muito mais f\u00e1cil de come\u00e7ar, tornando-a a escolha mais popular.<\/p>\n\n\n\n A principal raz\u00e3o para a introdu\u00e7\u00e3o do IndexedDB foi fazer uma vers\u00e3o melhor do localStorage. Ent\u00e3o, por que n\u00e3o usar IndexedDB em todos os casos? Se voc\u00ea deseja armazenar dados estruturados no lado do cliente, IndexedDB \u00e9 a melhor escolha, especialmente porque localStorage n\u00e3o foi criado para armazenar informa\u00e7\u00f5es confidenciais. Mas se voc\u00ea estiver armazenando uma quantidade simples e pequena de dados de pares de valores-chave, use localStorage.<\/p>\n\n\n\n O recurso localStorage pode oferecer benef\u00edcios para seus aplicativos, incluindo armazenamento aberto para manter os dados pelo tempo que voc\u00ea precisar e a capacidade de fazer seus aplicativos funcionarem offline. Essa forma de armazenamento de dados n\u00e3o ser\u00e1 a melhor escolha em todos os casos de uso e talvez seja necess\u00e1rio considerar IndexedDB em alguns casos.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Para a maioria dos navegadores ou browser, a API de armazenamento fornece um mecanismo para armazenar pares de valores-chave no<\/p>\n","protected":false},"author":4,"featured_media":17106,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[114,25,240],"tags":[269,224,225,306],"class_list":["post-17099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas","category-geral","category-javascript","tag-api","tag-javascript","tag-js","tag-localstorage"],"yoast_head":"\n\n
\n
\n
\n
\n
\n
window.localStorage.setItem(\"Dado\", \"Dados salvo no localStorage\")<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/09\/Captura-de-tela-de-2022-09-16-19-47-18.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/09\/Captura-de-tela-de-2022-09-16-19-47-55-1024x345.png\")
<\/figure>\n\n\n\nwindow.localStorage.getItem(\"Dado\"); \/\/ retorna 'Dados salvo no localStorage'\nwindow.localStorage.getItem(\"Dadossss\"); \/\/ retorna null<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/09\/image.png\")
<\/figure>\n\n\n\nalert( window.localStorage.getItem(\"Dado\") ); <\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/09\/image-1-1024x345.png\")
<\/figure>\n\n\n\nwindow.localStorage.removeItem(\"chave\"); <\/code><\/pre>\n\n\n\nwindow.localStorage.clear();<\/code><\/pre>\n\n\n\nwindow.localStorage.setItem('Teste', 'teste'); \/\/ Armazena novo item\nwindow.localStorage.key(0); \/\/ Retorna: Teste<\/code><\/pre>\n\n\n\nwindow.addEventListener(\"storage\", myFunction);\nfunction myFunction(event) {\n document.getElementById(\"app\").innerHTML = \"Change Made\";\n}\nfunction changeValue() {\n const newWindow = window.open(\"\", \"myWindow\");\n newWindow.localStorage.setItem(\"mytime\", Date.now());\n newWindow.close();\n}<\/code><\/pre>\n\n\n\n<h1 id=\"app\"><\/h1>\n<button onclick=\"changeValue()\">Alterar valor<\/button><\/code><\/pre>\n\n\n\n\n