Cómo crear una aplicación Vue To-Do con LocalStorage

LocalStorage es una API web, integrada en los navegadores, que permite a las aplicaciones web almacenar pares clave-valor en su dispositivo local. Proporciona un método sencillo para almacenar datos, incluso después de cerrar el navegador.

Puede integrar LocalStorage con sus aplicaciones Vue para almacenar listas y otros datos de pequeño tamaño. Esto le permite mantener los datos del usuario en diferentes sesiones de la aplicación.

Después de este tutorial, tendrá una aplicación funcional de tareas pendientes de Vue que puede agregar y eliminar tareas, almacenando los datos usando LocalStorage.

Configurar la aplicación Vue To-Do

Antes de comenzar a codificar, asegúrese de tener Node instalado y NPM en su dispositivo.

Para crear un nuevo proyecto, ejecute este comando npm:

npm create vue 

El comando necesitará que seleccione un ajuste preestablecido para su nueva aplicación Vue antes de crear e instalar las dependencias necesarias.

No necesitarás funciones adicionales para esta aplicación de tareas pendientes, así que elige "No" para todos los ajustes preestablecidos disponibles.

Con el proyecto configurado, puede comenzar a crear la aplicación de tareas pendientes con LocalStorage.

Crear la aplicación de tareas pendientes

Para este tutorial, creará dos componentes de Vue: App.vue para la estructura general y Todo.vue para mostrar una lista de tareas.

Crear el componente de tareas pendientes

Para el componente Todo, cree un nuevo archivo, src/components/Todo.vue. Este archivo manejará la estructura de la lista de tareas.

Pegue el siguiente código en el Todo.vue archivo:

<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>

El fragmento de código anterior detalla la estructura del Hacer componente. Configura el componente para recibir datos y emitir eventos mediante el uso de accesorios y eventos personalizados, respectivamente.

Para explicar más, el código emplea Accesorios de Vue para la comunicación entre componentes. para recibir el todos matriz de su componente principal, aplicación.vue. Luego utiliza el directiva v-for para renderizar listas para iterar a través de la matriz todos recibida.

El código también emite un evento personalizado, eliminar-todo, con una carga útil índice. Esto le permite eliminar una tarea particular con un índice específico en la matriz todos.

Al hacer clic en el Eliminar, el fragmento desencadena la emisión del evento personalizado al componente principal. Esto indica que ha hecho clic en el botón, lo que solicita la ejecución de la función correspondiente definida dentro del componente principal, App.vue.

Crear el componente de vista de la aplicación

Dirigirse a aplicación.vue para continuar construyendo la aplicación Todo. El Aplicación El componente se encargará de agregar nuevas tareas y renderizar el Hacer componente.

Pega lo siguiente guion bloquear en su archivo 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>

El fragmento de código anterior describe la lógica del aplicación.vue componente. El fragmento importa el Hacer componente e inicializa las variables reactivas con la API de composición de Vue.

El código comienza con la importación del componente Todo y el árbitro función desde la ruta especificada y vista, respectivamente.

Luego, el fragmento inicializa una cadena reactiva, nuevoTodo, para almacenar la tarea que ingresarás. También inicializa un reactivo vacío. todos matriz, que contiene la lista de tareas.

El agregarTodo La función agrega nuevas tareas a la matriz todos. Si newTodo no está vacío, se inserta en la matriz al confirmar y restablece el valor de newTodo para permitirle agregar más tareas.

La función addTodo también invoca la guardar en almacenamiento local, que guarda la matriz todos en el LocalStorage del navegador. El fragmento utiliza el establecer artículo método para lograr esto y convierte la matriz todos en una cadena JSON antes del almacenamiento.

También define un eliminarTodo función que toma un llave como parámetro. Utiliza esta clave para eliminar el correspondiente hacer de la matriz todos. Después de la eliminación, la función removeTodo llama a saveToLocalStorage para actualizar los datos de LocalStorage.

Finalmente, el código utiliza el obtiene el objeto método disponible para LocalStorage para recuperar tareas previamente guardadas con la tecla todos. Si ha guardado tareas en el LocalStorage del navegador, el código las inserta en la matriz todos.

Ahora que ha manejado la lógica del componente App.vue, pegue el siguiente código en el plantilla bloque de su aplicación Vue para crear la interfaz de usuario:

<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>

La plantilla utiliza modelo v, un método para vincular datos en Vue para vincular el todo ingresado al nuevoTodo cadena reactiva. La plantilla también utiliza el v-encendidodirectiva para el manejo de eventos en Vue a través de su taquigrafía (@).

Utiliza v-on para escuchar tanto el hacer clic y ingresar Eventos clave para confirmar el nuevo Todo.

Finalmente, la plantilla utiliza el Hacer componente que creó primero para representar la lista de todos. El :todos la sintaxis pasa el todos array como accesorio para el componente Todo.

El @eliminar-todo La sintaxis configura un detector de eventos para capturar el evento personalizado que emitió el componente Todo y llamar al eliminarTodo funcionar en respuesta.

Ahora que ha completado la solicitud, puede elegir diseñarla a su gusto. Puede obtener una vista previa de su aplicación ejecutando este comando:

npm run dev

Deberías ver una pantalla como esta:

Puede agregar o eliminar tareas dentro de la aplicación Todo. Además, gracias a la integración de LocalStorage, podrás actualizar la aplicación o salir de ella por completo; su lista de tareas pendientes seleccionada permanecerá intacta.

Importancia del almacenamiento local

La integración de LocalStorage en aplicaciones web es esencial tanto para desarrolladores novatos como experimentados. LocalStorage presenta a los principiantes la persistencia de datos al permitirles almacenar y recuperar contenido generado por el usuario.

LocalStorage es importante ya que puede garantizar que los datos de su usuario permanezcan intactos en diferentes sesiones. LocalStorage elimina la necesidad de una comunicación constante con el servidor, lo que genera tiempos de carga más rápidos y una mejor capacidad de respuesta en las aplicaciones web.