API de armazenamento da Web em HTML

Este artigo abordará os fundamentos da API de armazenamento da Web HTML , incluindo instruções sobre como usá-la e os benefícios que ela oferece em comparação aos métodos convencionais de armazenamento do lado do cliente.

Índice-

Armazenamento na Web em HTML – O que é?

Um aplicativo da web pode armazenar dados localmente no navegador de um usuário usando o armazenamento da web em HTML Webstorage .

Os cookies são usados ​​para armazenar dados do aplicativo antes do HTML5. As vantagens do armazenamento na web incluem maior segurança e a capacidade de armazenar grandes quantidades de dados localmente sem afetar o desempenho do site.

Ao contrário dos cookies, este não transmite informação ao servidor, e o limite de armazenamento é muito superior (pelo menos 5MB).

Cada domínio e protocolo tem seu armazenamento na web. Os dados de uma origem podem ser acessados ​​e armazenados em todas as páginas da web.

Uso de armazenamento da Web em HTML

O HTML Web Storage é uma ferramenta vantajosa para desenvolvedores da Web que permite armazenar e recuperar dados no lado do cliente. Essa abordagem elimina a necessidade de bancos de dados ou cookies do lado do servidor, tornando-se um método eficiente para salvar e acessar dados. Aqui estão alguns usos comuns do HTML Web Storage:

  • Armazenamento das preferências do usuário: o armazenamento na Web permite que os desenvolvedores armazenem preferências específicas do usuário, incluindo tamanho da fonte, configurações de idioma, temas de cores e outras configurações.
  • Cache de dados: dados usados ​​com frequência, como imagens, vídeos e arquivos de áudio, podem ser armazenados em cache usando o armazenamento na Web, resultando em desempenho e velocidade mais rápidos do site.
  • Salvando a entrada do usuário: o armazenamento na Web pode ser usado para armazenar dados de entrada do usuário, como formulários, carrinhos de compras e comentários, que podem ser recuperados e reutilizados em sessões subsequentes.
  • Criação de aplicativos da Web: O armazenamento na Web é uma ferramenta útil para desenvolver aplicativos da Web que funcionem offline. Os dados armazenados no lado do cliente permitem que os usuários acessem e usem o aplicativo da web mesmo sem uma conexão com a Internet.

Objetos de armazenamento da Web em HTML:

O objeto de armazenamento da web HTML oferece dois objetos de armazenamento de dados :

  1. window.localStorage – armazena dados sem expiração
  2. window.sessionStorage – armazena os dados perdidos ao fechar a guia do navegador.

Para garantir que o HTML Webstorage seja compatível com o navegador, verifique se localStorage e sessionStorage são suportados:

if (typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support.
}

Compatibilidade do navegador :

A tabela abaixo indica qual versão do navegador implementou o Webstorage HTML pela primeira vez.

API
Armazenamento web 4.0 8,0 3.5 4.0 11.5

Objeto LocalStorage:

Os dados são armazenados sem período de expiração no objeto localStorage. Quer o navegador seja fechado amanhã, na próxima semana ou no próximo ano, os dados permanecerão acessíveis.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
if (typeof(Storage) !== "undefined") {
localStorage.setItem("lastname", "Thomas");
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "The browser you are using does not support Web Storage.";
}
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo:

  1. Crie um par nome/valor localStorage com lastname=”lastname” e value=”Sam”.
  2. Obtenha o valor de “lastname” e insira-o no elemento com o id “resultado”

Como alternativa ao exemplo acima, você poderia escrevê-lo da seguinte maneira:

// Garage
localStorage.lastname = “Thomas”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

Abaixo exemplo de sintaxe removendo o item localStorage “lastname”:

localStorage.removeItem(“lastname”);

Importante: Strings são sempre usadas para armazenar pares nome/valor. Quando necessário, converta-os para outro formato!

Os cliques de um usuário em um botão são contados no exemplo a seguir. Este código converte a string de valor em um número e aumenta o contador:

Exemplo de armazenamento da Web em HTML:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "The browser you are using does not support Web Storage.";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Watch the counter grow by clicking the button.</p>
<p>The counter will continue to count (does not reset) if you close the tab (or window), and then try again.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Objeto SessionStorage:

SessionStorage é idêntico a localStorage, exceto que armazena apenas uma sessão de dados. Os dados são excluídos quando o usuário fecha a guia específica do navegador.

Uma sessão HTML Webstorage conta quantas vezes um usuário clicou em um botão:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "The browser you are using does not support Web Storage.";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Watch the counter grow by clicking the button.</p>
<p>The counter will continue to count (does not reset) if you close the tab (or window), and then try again.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Se este artigo de alguma forma atendeu às suas necessidades educacionais, compartilhe essas informações valiosas com seus amigos clicando nos links abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.