Ezzel az ismerős példaalkalmazással mindent megtudhat a webes adatok tárolásának modern módjáról.

A LocalStorage egy böngészőkbe épített web API, amely lehetővé teszi, hogy a webes alkalmazások kulcs-érték párokat tároljanak a helyi eszközön. Egyszerű módszert biztosít az adatok tárolására, még a böngésző bezárása után is.

A LocalStorage integrálható Vue-alkalmazásaival listák és egyéb kis méretű adatok tárolására. Ez lehetővé teszi a felhasználói adatok karbantartását a különböző alkalmazás-munkamenetekben.

Ezt az oktatóanyagot követően egy működőképes Vue teendőalkalmazással fog rendelkezni, amely feladatokat adhat hozzá és távolíthat el, az adatokat a LocalStorage segítségével tárolva.

A Vue To-Do alkalmazás beállítása

Mielőtt elkezdené a kódolást, győződjön meg arról, hogy rendelkezik telepítette a Node-ot és az NPM-et az eszközére.

Új projekt létrehozásához futtassa ezt az npm parancsot:

npm create vue

A parancshoz ki kell választania egy előre beállított értéket az új Vue-alkalmazáshoz, mielőtt létrehozza és telepíti a szükséges függőségeket.

Nincs szüksége további szolgáltatásokra ehhez a teendő alkalmazáshoz, ezért válassza a „Nem” lehetőséget az összes elérhető beállításhoz.

A projekt beállításával megkezdheti a teendő alkalmazás létrehozását a LocalStorage segítségével.

A Teendők alkalmazás létrehozása

Ehhez az oktatóanyaghoz két Vue-összetevőt kell létrehoznia: az App.vue-t a teljes szerkezethez, a Todo.vue-t pedig a feladatok listájának megjelenítéséhez.

A To-Do komponens létrehozása

A Todo komponenshez hozzon létre egy új fájlt, src/components/Todo.vue. Ez a fájl kezeli a feladatlista szerkezetét.

Illessze be a következő kódot a Todo.vue fájl:


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

A fenti kódrészlet részletezi a Csinálni összetevő. Beállítja az összetevőt, hogy adatokat fogadjon és eseményeket bocsát ki kellékek és egyedi események használatával.

További magyarázatként a kód alkalmazza Vue kellékek az összetevők közötti kommunikációhoz hogy megkapja a todos tömb a szülőkomponenséből, App.vue. Ezután a v-for direktíva a renderelő listákhoz hogy iterálja a kapott todos tömböt.

A kód egyéni eseményt is kibocsát, eltávolítás-teendő, hasznos teherrel index. Ez lehetővé teszi egy adott feladat eltávolítását egy adott indexszel a todos tömbben.

A gombra kattintva Távolítsa el gombot, a kódrészlet kiváltja az egyéni esemény kibocsátását a szülőkomponensbe. Ez azt jelzi, hogy rákattintott a gombra, és felszólítja a szülőösszetevőben, az App.vue-ban meghatározott megfelelő funkció végrehajtására.

Az alkalmazás nézet összetevőjének létrehozása

Irány oda App.vue hogy folytassa a Todo alkalmazás építését. A App komponens kezeli az új feladatok hozzáadását és a Csinálni összetevő.

Illessze be a következőket forgatókönyv blokkolja az App.vue fájlt:


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

A fenti kódrészlet felvázolja a logikáját App.vue összetevő. A kódrészlet importálja a Csinálni komponenst, és inicializálja a reaktív változókat a Vue Composition API-val.

A kód a Todo komponens importálásával kezdődik és a ref függvényt a megadott útvonalról és vue, ill.

A kódrészlet ezután inicializál egy reaktív karakterláncot, newTodo, a beírandó feladat tárolásához. Egy üres reaktívt is inicializál todos tömb, kezében a feladatok listája.

A addTodo függvény új feladatokat ad a todos tömbhöz. Ha a newTodo nem üres, akkor megerősítéskor bekerül a tömbbe, és visszaállítja a newTodo értékét, hogy további feladatokat adjon hozzá.

Az addTodo függvény is meghívja a saveToLocalStorage, amely a todos tömböt a böngésző LocalStorage-jába menti. A részlet a setItem módszert ennek eléréséhez, és a tárolás előtt átalakítja a todos tömböt JSON-karakterláncsá.

Meghatározza továbbá a RemoveTodo függvény, amely a kulcs paraméterként. Ezt a kulcsot használja a megfelelő eltávolításához csinálni a todos tömbből. Az eltávolítás után a removeTodo függvény meghívja a saveToLocalStorage-t a LocalStorage adatok frissítéséhez.

Végül a kód a getItem metódus elérhető a LocalStorage számára a korábban mentett feladatok lekéréséhez a todos billentyűvel. Ha elmentett feladatokat a böngésző LocalStorage-jában, a kód a todos tömbbe tolja azokat.

Most már kezelte az App.vue komponens logikáját, illessze be a következő kódot a sablon blokkja a Vue alkalmazásból a felhasználói felület létrehozásához:


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

A sablon használja v-modell, adatok kötésének módszere a Vue-ban hogy a bevitt teendőt a newTodo reaktív karakterlánc. A sablon is használja a v-ondirektíva a Vue események kezelésére a gyorsírásán keresztül (@).

A v-on segítségével meghallgatja mind a kattintson és belép kulcsfontosságú események az újTodo megerősítéséhez.

Végül a sablon a Csinálni komponens, amelyet először hozott létre a teendők listájának megjelenítéséhez. A :todos szintaxis átadja a todos tömb a Todo komponens támaszaként.

A @remove-todo szintaxisa beállít egy eseményfigyelőt, amely rögzíti a Todo összetevő által kibocsátott egyéni eseményt, és meghívja a RemoveTodo funkció válaszként.

Most befejezte a kérelmet, választhat, hogy ízlése szerint formálja. Az alkalmazás előnézetét a következő parancs futtatásával tekintheti meg:

npm run dev

Egy ehhez hasonló képernyőt kell látnod:

Feladatokat adhat hozzá vagy távolíthat el a Todo alkalmazáson belül. Sőt, a LocalStorage integrációjának köszönhetően frissítheti az alkalmazást, vagy teljesen kiléphet belőle; a válogatott teendők listája érintetlenül megmarad.

A LocalStorage jelentősége

A LocalStorage integrációja a webalkalmazásokban elengedhetetlen mind a kezdő, mind a tapasztalt fejlesztők számára. A LocalStorage bevezeti a kezdőket az adatmegmaradásba, lehetővé téve számukra a felhasználók által generált tartalmak tárolását és visszakeresését.

A LocalStorage fontos, mivel biztosíthatja, hogy felhasználói adatai változatlanok maradjanak a különböző munkamenetek során. A LocalStorage szükségtelenné teszi az állandó szerverkommunikációt, ami gyorsabb betöltési időt és jobb válaszkészséget eredményez a webalkalmazásokban.