Usando este aplicativo de exemplo familiar, aprenda tudo sobre a maneira moderna de armazenar dados da web.

LocalStorage é uma API da web, integrada em navegadores, que permite que aplicativos da web armazenem pares de valores-chave em seu dispositivo local. Ele fornece um método simples para armazenar dados, mesmo depois de fechar o navegador.

Você pode integrar LocalStorage com seus aplicativos Vue para armazenar listas e outros dados de pequeno porte. Isso permite manter os dados do usuário em diferentes sessões do aplicativo.

Após este tutorial, você terá um aplicativo de tarefas Vue funcional que pode adicionar e remover tarefas, armazenando os dados usando LocalStorage.

Configurando o aplicativo Vue To-Do

Antes de começar a codificar, certifique-se de ter instalou Node e NPM no seu dispositivo.

Para criar um novo projeto, execute este comando npm:

npm create vue

O comando exigirá que você selecione uma predefinição para seu novo aplicativo Vue antes de criar e instalar as dependências necessárias.

instagram viewer

Você não precisará de recursos extras para este aplicativo de tarefas, então escolha “Não” para todas as predefinições disponíveis.

Com o projeto configurado, você pode começar a construir o aplicativo de tarefas com LocalStorage.

Criando o aplicativo de tarefas pendentes

Para este tutorial, você criará dois componentes Vue: App.vue para a estrutura geral e Todo.vue para exibir uma lista de tarefas.

Criando o componente de tarefas pendentes

Para o componente Todo, crie um novo arquivo, src/components/Todo.vue. Este arquivo cuidará da estrutura da lista de tarefas.

Cole o seguinte código no Todo.vue arquivo:


<scriptsetup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
 emit('remove-todo', index);
};
script>
<template>
<divclass="todo-list">
<ul>
<liv-for="(todo, index) in props.todos":key="index"class="todo-item">
 {{ todo.text }}
<button @click="removeTodo(index)"class="remove-button">
 Remove
button>
li>
ul>
div>
template>

O trecho de código acima detalha a estrutura do Pendência componente. Ele configura o componente para receber dados e emitir eventos por meio do uso de props e eventos customizados, respectivamente.

Para explicar melhor, o código emprega Adereços Vue para comunicação entre componentes para receber o todos array de seu componente pai, Aplicativo.vue. Em seguida, ele usa o Diretiva v-for para renderizar listas para iterar pela matriz todos recebida.

O código também emite um evento personalizado, remover-fazer, com uma carga útil índice. Isso permite remover uma tarefa específica com um índice específico na matriz todos.

Ao clicar no Remover botão, o snippet aciona a emissão do evento personalizado para o componente pai. Isso indica que você clicou no botão, solicitando a execução da função correspondente definida no componente pai, App.vue.

Criando o componente View da aplicação

Vá para Aplicativo.vue para continuar construindo o aplicativo Todo. O Aplicativo componente cuidará da adição de novas tarefas e da renderização do Pendência componente.

Cole a seguinte roteiro bloquear em seu arquivo App.vue:


<scriptsetup>
import Todo from "./components/Todo.Vue";
import { ref } from "vue";
const newTodo = ref("");
const todos = ref([]);


const addTodo = () => {
 if (newTodo.value.trim() "") return;
 todos.value.push({ text: newTodo.value });
 newTodo.value = "";
 saveToLocalStorage();
};


const removeTodo = (key) => {
 todos.value.splice(key, 1);
 saveToLocalStorage();
};


const saveToLocalStorage = () => {
 localStorage.setItem("todos", JSON.stringify(todos.value));
};


const savedTodos = localStorage.getItem("todos");
if (savedTodos) {
 todos.value.push(...JSON.parse(savedTodos));
}
script>

O trecho de código acima descreve a lógica do Aplicativo.vue componente. O snippet importa o Pendência componente e inicializa variáveis ​​reativas com a API Vue Composition.

O código começa com a importação do componente Todo e o referência função do caminho especificado e vue, respectivamente.

O snippet então inicializa uma string reativa, novoTodo, para armazenar a tarefa que você irá inserir. Ele também inicializa um reativo vazio todos array, contendo a lista de tarefas.

O adicionarTodo função adiciona novas tarefas ao array todos. Se newTodo não estiver vazio, ele será inserido na matriz na confirmação e redefinirá o valor newTodo para permitir que você adicione mais tarefas.

A função addTodo também invoca o salvarToLocalStorage, que salva o array todos no LocalStorage do navegador. O trecho usa o definirItem método para conseguir isso e converte a matriz todos em uma string JSON antes do armazenamento.

Também define um removerTodo função que leva um chave como parâmetro. Ele usa esta chave para remover o correspondente pendência da matriz todos. Após a remoção, a função removeTodo chama saveToLocalStorage para atualizar os dados do LocalStorage.

Finalmente, o código usa o getItem método disponível para LocalStorage para buscar tarefas salvas anteriormente com a chave todos. Se você salvou tarefas no LocalStorage do navegador, o código as envia para o array todos.

Agora que você administrou a lógica do componente App.vue, cole o seguinte código no arquivo modelo bloco do seu aplicativo Vue para criar a interface do usuário:


<template>
<divclass="app">
<h1>To do Listh1>
<divclass="add-todo">
<inputv-model="newTodo" @keyup.enter="addTodo"
 placeholder="Add a new task" class="todo-input" />
<button @click="addTodo"class="add-button">Addbutton>
div>
<Todo:todos="todos" @remove-todo="removeTodo" />
div>
template>

O modelo usa modelo v, um método de vinculação de dados em Vue para vincular a tarefa inserida ao novoTodo cadeia reativa. O modelo também usa o v-ligadodiretiva para lidar com eventos em Vue através de sua abreviação (@).

Ele usa v-on para ouvir tanto o clique e digitar eventos importantes para confirmar o novoTodo.

Finalmente, o modelo usa o Pendência componente que você criou primeiro para renderizar a lista de todos. O :todos sintaxe passa o todos array como um suporte para o componente Todo.

O @remover-todo A sintaxe configura um ouvinte de evento para capturar o evento personalizado que o componente Todo emitiu e chamar o removerTodo funcionar em resposta.

Agora que você concluiu o aplicativo, pode optar por estilizá-lo de acordo com seu gosto. Você pode visualizar seu aplicativo executando este comando:

npm run dev

Você deverá ver uma tela como esta:

Você pode adicionar ou remover tarefas no aplicativo Todo. Além do mais, graças à integração do LocalStorage, você pode atualizar o aplicativo ou sair dele completamente; sua lista de tarefas selecionada permanecerá intacta.

Importância do armazenamento local

A integração do LocalStorage em aplicações web é essencial para desenvolvedores novatos e experientes. LocalStorage apresenta aos iniciantes a persistência de dados, permitindo-lhes armazenar e recuperar conteúdo gerado pelo usuário.

LocalStorage é importante porque você pode garantir que os dados do usuário permaneçam intactos em diferentes sessões. O LocalStorage elimina a necessidade de comunicação constante com o servidor, levando a tempos de carregamento mais rápidos e melhor capacidade de resposta em aplicações web.