API de armazenamento na Web

Índice

    Mostrar índice

A API Web Storage é uma sintaxe simples para armazenar e recuperar dados no navegador. É muito fácil de usar:

Exemplo

localStorage.setItem("name", "John Doe");
localStorage.getItem("name");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
localStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>

</body>
</html>

A API Web Storage é compatível com todos os navegadores:

Chrome IE/Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

O objeto localStorage

O objeto localStorage fornece acesso a um armazenamento local para um determinado site. Ele permite armazenar, ler, adicionar, modificar e excluir itens de dados desse domínio.

Os dados são armazenados sem prazo de validade e não serão excluídos quando o navegador for fechado.

Os dados estarão disponíveis por dias, semanas e anos.

O método setItem()

O método localStorage.setItem() armazena um item de dados em um armazenamento.

Leva um nome e um valor como parâmetros:

Exemplo

localStorage.setItem("name", "John Doe");

O método getItem()

O método localStorage.getItem() recupera um item de dados do armazenamento.

Leva um nome como parâmetro:

Exemplo

localStorage.getItem("name");

O objeto sessionStorage

O objeto sessionStorage é idêntico ao objeto localStorage.

A diferença é que o objeto sessionStorage armazena dados de uma sessão.

Os dados são excluídos quando o navegador é fechado.

Exemplo

sessionStorage.getItem("name");

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
sessionStorage.setItem("name","John Doe");
document.getElementById("demo").innerHTML = sessionStorage.getItem("name");
</script>

</body>
</html>

O método setItem()

O método sessionStorage.setItem() armazena um item de dados em um armazenamento.

Leva um nome e um valor como parâmetros:

Exemplo

sessionStorage.setItem("name", "John Doe");

O método getItem()

O método sessionStorage.getItem() recupera um item de dados do armazenamento.

Leva um nome como parâmetro:

Exemplo

sessionStorage.getItem("name");

Propriedades e métodos do objeto de armazenamento

key(n)

Retorna o nome da nchave no armazenamento

length

Retorna o número de itens de dados armazenados no objeto Storage

getItem(keyname)

Retorna o valor do nome da chave especificada

setItem(keyname, value)

Adiciona uma chave ao armazenamento ou atualiza um valor de chave (se já existir)

removeItem(keyname)

Remove essa chave do armazenamento

clear()

Esvazie todas as chaves do armazenamento

Páginas relacionadas para API de armazenamento na Web

window.localStorage

Permite salvar pares chave/valor em um navegador da web. Armazena os dados sem data de validade

window.sessionStorage

Permite salvar pares chave/valor em um navegador da web. Armazena os dados de um sessão