Storage

Storage.length Somente leitura

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

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.

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 ().

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

Using the Web Storage API