Armazenamento local e armazenamento de sessão em JavaScript

Digamos que você esteja criando um aplicativo da Web no qual os usuários poderão trabalhar com dados textuais ou imagens como mídia. Você deseja permitir que eles escrevam algum texto que precise estar acessível mesmo após uma atualização de página ou reinicialização do navegador. Antes da API de armazenamento na Web, você teria que armazenar as informações no back-end e recarregá-las no lado do cliente sempre que necessário. Este ainda é o caminho a seguir se você deseja que as informações estejam disponíveis em navegadores ou dispositivos.

No entanto, se as informações que você deseja preservar nas atualizações de página ou nas reinicializações do navegador devem ser acessíveis apenas no mesmo navegador, a API de armazenamento na Web é uma ferramenta muito mais adequada.

Existem dois tipos de implementações de armazenamento na web chamadas localStorage e sessionStorage. Como você deve ter adivinhado pelo nome, sessionStorage preserva informações para uma única sessão e localStorage preserva seus dados mesmo depois de reiniciar o navegador.

Neste tutorial, aprenderemos todos os fundamentos da API de armazenamento na Web e você verá como podemos usar o armazenamento local e o armazenamento de sessão a nosso favor.

Diferença entre armazenamento local e armazenamento de sessão

Antes de nos aprofundarmos na API, vamos aprender as diferenças básicas entre armazenamento local e armazenamento de sessão.

1. localStorage não expira mesmo na reinicialização do navegador enquanto sessionStorage dura apenas até uma atualização de página.
2. localStorage é compartilhado em várias guias e janelas que têm a mesma origem. Por outro lado, sessionStorage será diferente para cada guia que carregou a mesma página da web.

Uma única página da Web ou documento pode ter seu próprio localStorage assim como sessionStorage objeto. No entanto, ambos serão independentes um do outro.

Métodos e propriedades de armazenamento na Web disponíveis

Existem cinco métodos que estão disponíveis para ambos localStorage e sessionStorage.

Você pode usar o setItem(key, value) método para armazenar algumas informações no objeto de armazenamento como um par chave/valor. Se a chave já existir, este método atualizará seu valor. Lembre-se de que esse método requer chave e valor para uma string.

Você pode usar o getItem(key) método para recuperar as informações armazenadas para uma chave específica. Este método retornará null se a chave passada não existir.

Digamos que você queira remover algumas informações do seu localStorage ou sessionStorageneste caso, você pode usar o removeItem(key) e passe o nome da chave relevante para remover uma chave e seu valor do armazenamento.

Em vez de remover as chaves do seu armazenamento uma de cada vez, você também pode usar o clear() método para limpar todas as chaves de uma vez.

Há também um key(index) método que aceita um número inteiro como o índice de chave e retorna o nome da chave naquele índice específico. O importante a lembrar aqui é que a ordem das chaves é definida pelo agente do usuário.

Finalmente, há um length propriedade que você pode usar para obter o número de itens de dados armazenados em um determinado objeto de armazenamento.

Você pode usar o length propriedade em combinação com o key() método e o getItem() método para acessar os valores de todas as chaves em seu localSotrage ou sessionStorage.

Aqui estão alguns exemplos de uso de todos esses métodos:

1

/* Save some key-value pairs */

2

localStorage.setItem("artist", "Monty Shokeen");

3

localStorage.setItem("website", "tutsplus.com");

4

localStorage.setItem("font", "Righteous");

5

localStorage.setItem("stroke_width", "4");

6

localStorage.setItem("color", "#FF5722");

7

8

/* Access stored values */

9

console.log(localStorage.getItem("color"));

10

// Outputs: #FF5722

11

12

console.log(localStorage.getItem("stroke_width"));

13

// Outputs: 4

14

15

/* Iterate over keys */

16

for (let i = 0; i < localStorage.length; i++) {

17

  console.log(`${localStorage.key(i)} : ${localStorage.getItem(localStorage.key(i))}`);

18

}

19

/*

20

stroke_width : 4

21

font : Righteous

22

website : tutsplus.com

23

color : #FF5722

24

artist : Monty Shokeen

25

*/

26

27

/* Removing keys from storage */

28

localStorage.removeItem("website"); 

29

localStorage.getItem("website"); 

30

// Outputs: null

Aplicação prática do armazenamento local

Vamos fazer algo prático com todo o conhecimento que adquirimos. Criaremos um aplicativo de desenho simples onde os usuários poderão salvar seus dados no armazenamento local para recuperação futura.

Nosso aplicativo de desenho será muito simples. Teremos uma tela onde os usuários poderão desenhar círculos concêntricos de raio aleatório. O valor mínimo e máximo do raio serão determinados pelos campos de entrada preenchidos por eles. Também teremos um botão para limpar a tela depois de desenharmos muitos círculos. Aqui está nossa marcação:

1

 id="canvas" width="810" height="400">

2

3

   for="min-rad">Min. Radius

4

   type="number" name="min-rad" id="min-rad" min="4">

5

6

   for="max-rad">Max. Radius

7

   type="number" name="max-rad" id="max-rad" min="20">

8

9

   type="button" id="clear">Clear Canvas

10

Estaremos armazenando três informações em nosso armazenamento local: o raio mínimo, o raio máximo e o estado da tela. Lembre-se de que o armazenamento local só pode armazenar informações como strings. O valor dos campos de entrada pode ser convertido automaticamente em strings. No entanto, precisaremos usar o toDataURL() método para obter o estado de nossa tela como uma string. Este método nos retornará uma string que contém o URL dos dados solicitados.

Vamos anexar ouvintes de eventos a todos os elementos da página da web. UMA mousedown ouvinte de evento para a tela. UMA change ouvinte de evento para os elementos de entrada e um click ouvinte de evento para os botões. Vamos começar com algum código de inicialização e os ouvintes de evento para os campos do formulário.

1

const canvas = document.getElementById("canvas");

2

const ctx = canvas.getContext("2d");

3

4

const minElem = document.querySelector("input#min-rad");

5

const maxElem = document.querySelector("input#max-rad");

6

const clearBtn = document.querySelector("button#clear");

7

8

let min_radius = 10;

9

let max_radius = 30;

10

11

minElem.addEventListener("change", function(event) {

12

  min_radius = parseInt(event.target.value);

13

  localStorage.setItem("min-radius", min_radius);

14

});

15

16

maxElem.addEventListener("change", function(event) {

17

  max_radius = parseInt(event.target.value);

18

  localStorage.setItem("max-radius", max_radius);

19

});

20

21

clearBtn.addEventListener("click", function(event) {

22

  ctx.clearRect(0, 0, canvas.width, canvas.height);

23

24

  let image_data = canvas.toDataURL();

25

  localStorage.setItem("image-data", image_data);

26

});

Por padrão, mantemos os valores de raio mínimo e máximo definidos para 10 e 30 pixels, respectivamente. O ouvinte de eventos de alteração para os campos de entrada de raio mínimo e máximo analisará o valor das entradas e, em seguida, armazenará esses valores no armazenamento local.

No retorno de chamada do ouvinte de evento de clique para nosso botão, primeiro limpamos a tela e, em seguida, salvamos esse estado limpo em nosso armazenamento local usando o método toDataUrl() método.

Aqui está o código que escuta o mousedown evento em nossa tela.

1

canvas.addEventListener('mousedown', function(event) {

2

    const canvas_rect = event.target.getBoundingClientRect();

3

    const pos_x = event.clientX - canvas_rect.left;

4

    const pos_y = event.clientY - canvas_rect.top;

5

6

    for(let i = 0; i < 10; i++) {

7

      let radius = min_radius + Math.floor(Math.random()*(max_radius - min_radius));

8

      ctx.beginPath();

9

      ctx.arc(pos_x, pos_y, radius, 0, 2 * Math.PI);

10

      ctx.stroke();

11

    }

12

13

    let image_data = canvas.toDataURL();

14

    localStorage.setItem("image-data", image_data);

15

});

Vamos decompô-lo. Começamos calculando a posição exata em que os usuários clicaram na tela. Isso é determinado pela subtração do valor do left propriedade do retângulo delimitador da tela a partir da coordenada x da posição clicada. Fazemos o mesmo para obter a posição vertical do clique.

Depois disso, criamos um for loop para desenhar 10 círculos concêntricos na tela. O raio é definido para um valor aleatório sujeito às restrições mínimas e máximas. Por fim, assim como o ouvinte de clique do botão, salvamos o estado da tela em nosso armazenamento local. Isso acontece a cada clique para que possamos ficar atualizados com o último estado da tela.

A única coisa que nos resta agora é restaurar os valores do armazenamento local para serem usados ​​em recargas ou reinicializações. Fazemos isso com o seguinte código:

1

window.addEventListener("DOMContentLoaded", (event) => {

2

  if (localStorage.getItem("image-data")) {

3

    var img = new Image();

4

    img.onload = function () {

5

      ctx.drawImage(img, 0, 0);

6

    };

7

    img.src = localStorage.getItem("image-data");

8

  }

9

10

  if (localStorage.getItem("min-radius")) {

11

    min_radius = parseInt(localStorage.getItem("min-radius"));

12

  }

13

14

  if (localStorage.getItem("max-radius")) {

15

    max_radius = parseInt(localStorage.getItem("max-radius"));

16

  }

17

18

  minElem.value = min_radius;

19

  maxElem.value = max_radius;

20

});

A seção mais complicada aqui é a restauração dos dados da imagem do armazenamento local para a tela. Fazemos isso criando primeiro uma nova instância de HTMLImageElement e, em seguida, ouvindo a sua onload evento para desenhar a imagem carregada na tela.

A seguinte demonstração do CodePen mostrará nosso aplicativo de desenho em ação. Tente clicar na tela para desenhar alguns círculos ou definir o raio para os valores que você gosta primeiro.

No momento, estamos usando localStorage em nosso tutorial, o que significa que nossos dados estarão seguros mesmo se o navegador for reiniciado. Você pode tentar substituí-lo por sessionStorage para preservar as informações apenas durante as atualizações de página.

Pensamentos finais

Neste tutorial, cobrimos os fundamentos do localStorage e sessionStorage em JavaScript. Agora você deve ser capaz de armazenar e recuperar informações no armazenamento do navegador usando a API de armazenamento na web. Essa API tem muitos aplicativos, como vimos ao criar nosso aplicativo de desenho aqui. Você também pode usá-lo para implementar a funcionalidade de salvamento de conteúdo em um editor de texto local.