Come creare un'app Vue To-Do con LocalStorage

LocalStorage è un'API Web, integrata nei browser, che consente alle applicazioni Web di archiviare coppie chiave-valore sul tuo dispositivo locale. Fornisce un metodo semplice per archiviare i dati, anche dopo aver chiuso il browser.

Puoi integrare LocalStorage con le tue app Vue per archiviare elenchi e altri dati di piccole dimensioni. Ciò ti consente di conservare i dati utente tra diverse sessioni dell'app.

Dopo questo tutorial, avrai un'app Vue da fare funzionale che può aggiungere e rimuovere attività, archiviando i dati utilizzando LocalStorage.

Configurazione dell'applicazione Vue To-Do

Prima di iniziare a scrivere codice, assicurati di averlo installato Node e NPM sul tuo dispositivo.

Per creare un nuovo progetto, esegui questo comando npm:

npm create vue 

Il comando richiederà la selezione di una preimpostazione per la tua nuova applicazione Vue prima di creare e installare le dipendenze necessarie.

Non avrai bisogno di funzionalità extra per questa app da fare, quindi scegli "No" per tutte le preimpostazioni disponibili.

Una volta impostato il progetto, puoi iniziare a creare l'applicazione da fare con LocalStorage.

Creazione dell'applicazione To-Do

Per questo tutorial creerai due componenti Vue: App.vue per la struttura generale e Todo.vue per visualizzare un elenco di attività.

Creazione del componente Da fare

Per il componente Todo, crea un nuovo file, src/components/Todo.vue. Questo file gestirà la struttura dell'elenco delle attività.

Incolla il seguente codice nel file Todo.vue file:

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

Lo snippet di codice riportato sopra descrive in dettaglio la struttura del file Fare componente. Imposta il componente per ricevere dati ed emettere eventi attraverso l'uso rispettivamente di oggetti di scena ed eventi personalizzati.

Per spiegare ulteriormente, il codice utilizza Oggetti di scena Vue per la comunicazione tra i componenti per ricevere il tutto array dal suo componente principale, App.vue. Quindi utilizza il direttiva v-for per il rendering degli elenchi per scorrere l'array todos ricevuto.

Il codice emette anche un evento personalizzato, rimuovere-to-do, con un carico utile indice. Ciò ti consente di rimuovere una particolare attività con un indice specifico nell'array todos.

Facendo clic su Rimuovere pulsante, lo snippet attiva l'emissione dell'evento personalizzato al componente principale. Ciò indica che hai fatto clic sul pulsante, richiedendo l'esecuzione della funzione corrispondente definita all'interno del componente principale, App.vue.

Creazione del componente di visualizzazione dell'applicazione

Vai a App.vue per continuare a creare l'applicazione Todo. IL App Il componente gestirà l'aggiunta di nuove attività e il rendering del file Fare componente.

Incolla quanto segue sceneggiatura blocca nel tuo file 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>

Il frammento di codice riportato sopra delinea la logica del file App.vue componente. Lo snippet importa il file Fare componente e inizializza le variabili reattive con l'API Vue Composition.

Il codice inizia con l'importazione del componente Todo e del file rif funzione dal percorso specificato e vista, rispettivamente.

Lo snippet inizializza quindi una stringa reattiva, nuovoTodo, per memorizzare l'attività che inserirai. Inizializza anche un reattivo vuoto tutto array, contenente l'elenco delle attività.

IL aggiungiTodo la funzione aggiunge nuove attività all'array todos. Se newTodo non è vuoto, viene inserito nell'array alla conferma e reimposta il valore newTodo per consentire di aggiungere più attività.

Anche la funzione addTodo richiama il file saveToLocalStorage, che salva l'array todos nel LocalStorage del browser. Lo snippet utilizza il file setItem per raggiungere questo obiettivo e converte l'array todos in una stringa JSON prima dell'archiviazione.

Definisce inoltre a rimuoviTodo funzione che accetta a chiave come parametro. Utilizza questa chiave per rimuovere il corrispondente fare dall'array todos. Dopo la rimozione, la funzioneremoveTodo chiama saveToLocalStorage per aggiornare i dati LocalStorage.

Infine, il codice utilizza il file getItem metodo disponibile per LocalStorage per recuperare le attività salvate in precedenza con la chiave todos. Se hai salvato attività nel LocalStorage del browser, il codice le inserisce nell'array todos.

Ora che hai gestito la logica del componente App.vue, incolla il seguente codice nel file modello blocco della tua app Vue per creare l'interfaccia utente:

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

Il modello utilizza modello v, un metodo per associare i dati in Vue per associare le cose da fare immesse al file nuovoTodo stringa reattiva. Il modello utilizza anche il file v-ondirettiva per la gestione degli eventi in Vue attraverso la sua abbreviazione (@).

Utilizza v-on per ascoltare sia il file clic E accedere eventi chiave per confermare il nuovo Todo.

Infine, il modello utilizza il file Fare componente che hai creato per primo per eseguire il rendering dell'elenco delle cose da fare. IL :tutto la sintassi passa il tutto array come sostegno al componente Todo.

IL @remove-todo la sintassi configura un ascoltatore di eventi per acquisire l'evento personalizzato emesso dal componente Todo e chiamare il file rimuoviTodo funzione in risposta.

Ora che hai completato l'applicazione, puoi scegliere di modellarla secondo i tuoi gusti. Puoi visualizzare l'anteprima della tua applicazione eseguendo questo comando:

npm run dev

Dovresti vedere una schermata come questa:

Puoi aggiungere o rimuovere attività all'interno dell'applicazione Todo. In più, grazie all'integrazione di LocalStorage, potrai aggiornare l'applicazione o chiuderla completamente; la tua lista di cose da fare curata persisterà intatta.

Importanza di LocalStorage

L'integrazione di LocalStorage nelle applicazioni web è essenziale sia per gli sviluppatori principianti che per quelli esperti. LocalStorage introduce i principianti alla persistenza dei dati consentendo loro di archiviare e recuperare contenuti generati dagli utenti.

LocalStorage è importante in quanto puoi garantire che i dati utente rimangano intatti nelle diverse sessioni. LocalStorage elimina la necessità di una comunicazione costante con il server, garantendo tempi di caricamento più rapidi e una migliore reattività delle applicazioni web.