Home-theater-designers
LocalStorage is een web-API, ingebouwd in browsers, waarmee webapplicaties sleutel-waardeparen op uw lokale apparaat kunnen opslaan. Het biedt een eenvoudige methode om gegevens op te slaan, zelfs nadat u uw browser heeft gesloten.
MUO-video van de dag SCROLL OM DOOR TE GAAN MET INHOUD
U kunt LocalStorage integreren met uw Vue-apps om lijsten en andere kleine gegevens op te slaan. Hierdoor kunt u gebruikersgegevens voor verschillende app-sessies bijhouden.
Na deze tutorial heb je een functionele Vue to-do-app die taken kan toevoegen en verwijderen, en de gegevens kan opslaan met LocalStorage.
De Vue To-Do-applicatie instellen
Voordat u begint met coderen, moet u ervoor zorgen dat u dit gedaan heeft Node en NPM op uw apparaat geïnstalleerd .
Om een nieuw project te maken, voert u deze npm-opdracht uit:
npm create vue
Voor deze opdracht moet u een voorinstelling voor uw nieuwe Vue-toepassing selecteren voordat u de benodigde afhankelijkheden maakt en installeert.
Voor deze to-do-app heb je geen extra features nodig, dus kies ‘Nee’ voor alle beschikbare presets.
Nu het project is opgezet, kunt u beginnen met het bouwen van de to-do-applicatie met LocalStorage.
De To-Do-applicatie maken
Voor deze zelfstudie maakt u twee Vue-componenten: App.vue voor de algemene structuur en Todo.vue om een lijst met taken weer te geven.
Het to-do-onderdeel maken
Maak voor de Todo-component een nieuw bestand, src/components/Todo.vue . Dit bestand zorgt voor de structuur van de lijst met taken.
Plak de volgende code in het Todo.vue bestand:
<!-- 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>
Het bovenstaande codefragment beschrijft de structuur van het Alle bestanddeel. Het stelt de component in om gegevens te ontvangen en gebeurtenissen uit te zenden door respectievelijk rekwisieten en aangepaste gebeurtenissen te gebruiken.
Om het verder uit te leggen, maakt de code gebruik van Vue-rekwisieten voor communicatie tussen componenten om de te ontvangen alle array van de bovenliggende component, app.vue . Er wordt dan gebruik gemaakt van de v-for-richtlijn voor het weergeven van lijsten om de ontvangen todos-array te doorlopen.
De code verzendt ook een aangepaste gebeurtenis, Verwijder alles , met een lading inhoudsopgave . Hiermee kunt u een bepaalde taak met een specifieke index in de todos-array verwijderen.
hoe een afspeellijst naar Spotify te importeren
Door te klikken op de Verwijderen knop activeert het fragment de verzending van de aangepaste gebeurtenis naar de bovenliggende component. Dit geeft aan dat u op de knop hebt geklikt, waardoor de overeenkomstige functie wordt uitgevoerd die is gedefinieerd in de bovenliggende component, App.vue.
De weergavecomponent van de toepassing maken
Ga naar app.vue om door te gaan met het bouwen van de Todo-applicatie. De App component zorgt voor het toevoegen van nieuwe taken en het weergeven van de Alle bestanddeel.
Plak het volgende script blokkeren in uw App.vue-bestand:
<!-- 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>
Het bovenstaande codefragment schetst de logica van het app.vue bestanddeel. Het fragment importeert de Alle component en initialiseert reactieve variabelen met de Vue Composition API.
De code begint met het importeren van de Todo-component en de ref functie vanaf het opgegeven pad en weergave respectievelijk.
Het fragment initialiseert vervolgens een reactieve tekenreeks, nieuwTodo , om de taak die u invoert op te slaan. Het initialiseert ook een lege reactieve alle array, met de lijst met taken.
De toevoegenTodo functie voegt nieuwe taken toe aan de todos-array. Als newTodo niet leeg is, wordt het bij bevestiging in de array gepusht en wordt de newTodo-waarde opnieuw ingesteld, zodat u meer taken kunt toevoegen.
De addTodo-functie roept ook de opslaanNaarLokaleOpslag, waarmee de todos-array wordt opgeslagen in de LocalStorage van de browser. Het fragment maakt gebruik van de setItem methode om dit te bereiken en converteert de todos-array naar een JSON-tekenreeks vóór opslag.
Het definieert ook a verwijderTodo functie die a nodig heeft sleutel als parameter. Het gebruikt deze sleutel om het overeenkomstige te verwijderen alle uit de todos-array. Na verwijdering roept de functie removeTodo de saveToLocalStorage aan om de LocalStorage-gegevens bij te werken.
Ten slotte gebruikt de code de krijgItem methode beschikbaar voor LocalStorage om eerder opgeslagen taken op te halen met de todos-toets. Als u taken in de LocalStorage van de browser hebt opgeslagen, duwt de code deze naar de todos-array.
Nu je de logica van de App.vue-component hebt afgehandeld, plak je de volgende code in het sjabloon blok van uw Vue-app om de gebruikersinterface te maken:
<!-- 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>
De sjabloon gebruikt v-model , een methode om gegevens in Vue te binden om de ingevoerde taak te binden aan de nieuwTodo reactieve reeks. De sjabloon maakt ook gebruik van de v-aan richtlijn voor het afhandelen van gebeurtenissen in Vue via zijn afkorting ( @ ).
Het gebruikt v-on om naar zowel de Klik En binnenkomen belangrijke gebeurtenissen om de newTodo te bevestigen.
Ten slotte gebruikt de sjabloon de Alle component die u als eerste hebt gemaakt om de lijst met taken weer te geven. De :alle syntaxis geeft de alle array als een prop voor de Todo-component.
De @verwijder-alles syntaxis stelt een gebeurtenislistener in om de aangepaste gebeurtenis vast te leggen die de Todo-component heeft uitgezonden en de verwijderTodo functie als reactie.
Nu je de aanvraag hebt afgerond, kun je ervoor kiezen om deze naar jouw smaak te stylen. U kunt een voorbeeld van uw toepassing bekijken door deze opdracht uit te voeren:
npm run dev
Je zou een scherm als dit moeten zien:
Je kunt taken toevoegen of verwijderen binnen de Todo-applicatie. Bovendien kunt u dankzij de integratie van LocalStorage de applicatie vernieuwen of helemaal afsluiten; uw samengestelde takenlijst blijft intact.
Belang van lokale opslag
LocalStorage-integratie in webapplicaties is essentieel voor zowel beginnende als ervaren ontwikkelaars. LocalStorage laat beginners kennismaken met datapersistentie door hen in staat te stellen door gebruikers gegenereerde inhoud op te slaan en op te halen.
LocalStorage is belangrijk omdat u ervoor kunt zorgen dat uw gebruikersgegevens tijdens verschillende sessies intact blijven. LocalStorage elimineert de noodzaak van constante servercommunicatie, wat leidt tot snellere laadtijden en verbeterde responsiviteit in webapplicaties.