---
title: Storage
slug: Web/API/Storage
tags:
  - API
  - Interface
  - NeedsTranslation
  - Reference
  - Storage
  - TopicStub
  - Web Storage
  - data
translation_of: Web/API/Storage
---
<p>{{APIRef("Web Storage API")}}</p>

<p>A interface de Armazenamento da Web Storage API fornece acesso ao armazenamento de sessão ou armazenamento local para um domínio específico, permitindo que você, por exemplo, adicione, modifique ou exclua itens de dados armazenados.</p>

<p>Se você quiser manipular o armazenamento de sessão para um domínio, você chama o método {{domxref ("Window.sessionStorage")}}; Se você quiser manipular o armazenamento local para um domínio, você chama {{domxref ("Window.localStorage")}}.</p>

<h2 id="Propriedades">Propriedades</h2>

<dl>
 <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
 <dd>Retorna um número inteiro que representa o número de itens de dados armazenados no objeto Storage.</dd>
</dl>

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>{{domxref("Storage.key()")}}</dt>
 <dd>Quando passado um número n, este método retornará o nome da n-ésima chave no armazenamento..</dd>
</dl>

<dl>
 <dt>{{domxref("Storage.getItem()")}}</dt>
 <dd>Quando passado um nome de chave, retornará o valor dessa chave.</dd>
 <dt>{{domxref("Storage.setItem()")}}</dt>
 <dd>Quando passado um nome de chave e valor, irá adicionar essa chave para o armazenamento, ou atualizar o valor dessa chave, se já existir.</dd>
 <dt>{{domxref("Storage.removeItem()")}}</dt>
 <dd>Quando passado um nome de chave, irá remover essa chave do armazenamento.</dd>
 <dt>{{domxref("Storage.clear()")}}</dt>
 <dd>Quando chamado, irá esvaziar todas as chaves fora do armazenamento.</dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<p>Aqui acessamos um objeto Storage chamando localStorage. Primeiro testamos se o armazenamento local contém itens de dados usando! localStorage.getItem ('bgcolor'). Se isso acontecer, executaremos uma função chamada setStyles () que agarra os itens de dados usando {{domxref("localStorage.getItem()")}} E usa esses valores para atualizar estilos de página. Se não, executamos outra função, populateStorage (), que usa {{domxref("localStorage.setItem()")}} Para definir os valores do item, em seguida, executa setStyles ().</p>

<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
  populateStorage();
} else {
  setStyles();
}

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);

  setStyles();
}

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}</pre>

<div class="note">
<p><strong>Nota</strong>: Para ver isso funcionando como um exemplo completo de trabalho, consulte nossa <a href="https://github.com/mdn/web-storage-demo">Demonstração de armazenamento na Web</a>.</p>
</div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td>
   <td>{{Spec2('Web Storage')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>

<p> </p>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
</div>

<p>{{Compat("api.Storage")}}</p>

<p> </p>

<div id="compat-desktop"> </div>

<p>[1] Desde o iOS 5.1, o Safari Mobile armazena os dados localStorage na pasta de cache, que está sujeita a limpeza ocasional a pedido do sistema operacional, normalmente se o espaço for curto.</p>

<p>Todos os navegadores têm diferentes níveis de capacidade para o localStorage e sessionStorage. <a href="http://dev-test.nemikor.com/web-storage/support-test/">Aqui está um resumo detalhado de todas as capacidades de armazenamento para vários navegadores</a>.</p>

<h2 id="Veja_também">Veja também</h2>

<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>