Home-theater-designers
LocalStorage és una API web, integrada als navegadors, que permet que les aplicacions web emmagatzemen parells clau-valor al vostre dispositiu local. Proporciona un mètode senzill per emmagatzemar dades, fins i tot després de tancar el navegador.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
Podeu integrar LocalStorage amb les vostres aplicacions Vue per emmagatzemar llistes i altres dades de mida petita. Això us permet mantenir les dades d'usuari en diferents sessions d'aplicacions.
Després d'aquest tutorial, tindreu una aplicació de tasques Vue funcional que pot afegir i eliminar tasques, emmagatzemant les dades mitjançant LocalStorage.
Configuració de l'aplicació Vue To-Do
Abans de començar a codificar, assegureu-vos de tenir instal·lat Node i NPM al vostre dispositiu .
Per crear un projecte nou, executeu aquesta comanda npm:
npm create vue
L'ordre necessitarà que seleccioneu un valor predefinit per a la vostra nova aplicació Vue abans de crear i instal·lar les dependències necessàries.
No necessitareu funcions addicionals per a aquesta aplicació de tasques pendents, així que trieu 'No' per a tots els valors predefinits disponibles.
Amb el projecte configurat, podeu començar a crear l'aplicació de tasques pendents amb LocalStorage.
Creació de l'aplicació de tasques pendents
Per a aquest tutorial, creareu dos components Vue: App.vue per a l'estructura general i Todo.vue per mostrar una llista de tasques.
Creació del component de tasques pendents
Per al component Tot, creeu un fitxer nou, src/components/Todo.vue . Aquest fitxer gestionarà l'estructura de la llista de tasques.
Enganxeu el codi següent al fitxer Tot.vou dossier:
<!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
emit('remove-todo', index);
};
</script>
<template>
<div class="todo-list">
<ul>
<li v-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 fragment de codi anterior detalla l'estructura del fitxer Tot component. Configura el component per rebre dades i emetre esdeveniments mitjançant l'ús d'accessoris i esdeveniments personalitzats, respectivament.
Per explicar més, el codi empra Atrezzos Vue per a la comunicació entre components per rebre el tots matriu del seu component pare, app.vue . A continuació, utilitza el v-for directiva per a la representació de llistes per iterar a través de la matriu de tots rebuda.
El codi també emet un esdeveniment personalitzat, remove-tot , amb una càrrega útil índex . Això us permet eliminar una tasca concreta amb un índex específic a la matriu de tots.
En fer clic a Eliminar botó, el fragment activa l'emissió de l'esdeveniment personalitzat al component principal. Això indica que heu fet clic al botó i demana l'execució de la funció corresponent definida dins del component principal, App.vue.
Creació del component de visualització de l'aplicació
Dirigiu-vos a app.vue per continuar construint l'aplicació Todo. El App component s'encarregarà d'afegir noves tasques i de representar el fitxer Tot component.
Enganxeu el següent guió bloquejar al fitxer App.vue:
<!-- App.vue -->
<script setup>
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 fragment de codi anterior descriu la lògica del fitxer app.vue component. El fragment importa el fitxer Tot component i inicialitza variables reactives amb l'API Vue Composition.
El codi comença amb la importació del component Todo i el ref funció des del camí especificat i vista , respectivament.
A continuació, el fragment inicialitza una cadena reactiva, nouTot , per emmagatzemar la tasca que introduïu. També inicialitza un reactiu buit tots matriu, amb la llista de tasques.
El addTodo La funció afegeix noves tasques a la matriu de tots. Si newTodo no està buit, s'envia a la matriu en confirmar-se i restableix el valor newTodo per permetre't afegir més tasques.
La funció addTodo també invoca el saveToLocalStorage, que desa la matriu de tots al LocalStorage del navegador. El fragment utilitza el setItem mètode per aconseguir-ho i converteix la matriu todos en una cadena JSON abans de l'emmagatzematge.
També defineix a eliminarTodo funció que pren a clau com a paràmetre. Utilitza aquesta clau per eliminar la corresponent tot de la matriu de tots. Després de l'eliminació, la funció removeTodo crida a saveToLocalStorage per actualitzar les dades de LocalStorage.
Vaig prémer un botó del teclat i ara no puc escriure
Finalment, el codi utilitza el getItem mètode disponible per a LocalStorage per obtenir tasques desades anteriorment amb la clau de tots. Si heu desat tasques al LocalStorage del navegador, el codi les introdueix a la matriu de tots.
Ara que heu gestionat la lògica del component App.vue, enganxeu el codi següent al fitxer plantilla bloc de la vostra aplicació Vue per crear la interfície d'usuari:
<!-- App.vue -->
<template>
<div class="app">
<h1>To do List</h1>
<div class="add-todo">
<input v-model="newTodo" @keyup.enter="addTodo"
placeholder="Add a new task" class="todo-input" />
<button @click="addTodo" class="add-button">Add</button>
</div>
<Todo :todos="todos" @remove-todo="removeTodo" />
</div>
</template>
La plantilla utilitza model v , un mètode d'enllaç de dades a Vue per enllaçar el tot introduït al nouTot cadena reactiva. La plantilla també utilitza v-on directiva per gestionar esdeveniments a Vue mitjançant la seva taquigrafia ( @ ).
Utilitza v-on per escoltar tots dos feu clic i entrar esdeveniments clau per confirmar el nouTodo.
Finalment, la plantilla utilitza el Tot component que heu creat primer per representar la llista de tots. El :tots la sintaxi passa el tots matriu com a complement al component Todo.
El @remove-tot La sintaxi configura un oient d'esdeveniments per capturar l'esdeveniment personalitzat que el component Todo ha emès i crida a eliminarTodo funció com a resposta.
Ara que heu completat l'aplicació, podeu optar per estilitzar-la al vostre gust. Podeu previsualitzar la vostra aplicació executant aquesta ordre:
npm run dev
Hauríeu de veure una pantalla com aquesta:
Podeu afegir o eliminar tasques dins de l'aplicació Todo. A més, gràcies a la integració de LocalStorage, podeu actualitzar l'aplicació o sortir-ne completament; la vostra llista de tasques seleccionades perdurarà intacta.
Importància de LocalStorage
La integració de LocalStorage a les aplicacions web és essencial tant per als desenvolupadors novells com per als experimentats. LocalStorage introdueix els principiants a la persistència de les dades permetent-los emmagatzemar i recuperar contingut generat per l'usuari.
L'emmagatzematge local és important, ja que podeu assegurar-vos que les vostres dades d'usuari romanguin intactes en diferents sessions. LocalStorage elimina la necessitat d'una comunicació constant amb el servidor, la qual cosa condueix a temps de càrrega més ràpids i millora la capacitat de resposta de les aplicacions web.