Storage

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Se você quiser manipular o armazenamento de sessão para um domínio, você chama o método Window.sessionStorage; Se você quiser manipular o armazenamento local para um domínio, você chama Window.localStorage.

Propriedades

Storage.length Somente leitura

Retorna um número inteiro que representa o número de itens de dados armazenados no objeto Storage.

Métodos

Storage.key()

Quando passado um número n, este método retornará o nome da n-ésima chave no armazenamento..

Storage.getItem()

Quando passado um nome de chave, retornará o valor dessa chave.

Storage.setItem()

Quando passado um nome de chave e valor, irá adicionar essa chave para o armazenamento, ou atualizar o valor dessa chave, se já existir.

Storage.removeItem()

Quando passado um nome de chave, irá remover essa chave do armazenamento.

Storage.clear()

Quando chamado, irá esvaziar todas as chaves fora do armazenamento.

Exemplos

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 localStorage.getItem() E usa esses valores para atualizar estilos de página. Se não, executamos outra função, populateStorage (), que usa localStorage.setItem() Para definir os valores do item, em seguida, executa setStyles ().

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);
}

Nota: Para ver isso funcionando como um exemplo completo de trabalho, consulte nossa Demonstração de armazenamento na Web.

Especificações

Specification
HTML
# storage

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Storage
clear
getItem
key
length
removeItem
setItem

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também