Använd denna välbekanta exempelapp och lär dig allt om det moderna sättet att lagra webbdata.

LocalStorage är ett webb-API, inbyggt i webbläsare, som låter webbapplikationer lagra nyckel-värdepar på din lokala enhet. Det ger en enkel metod att lagra data, även efter att du stänger din webbläsare.

Du kan integrera LocalStorage med dina Vue-appar för att lagra listor och annan liten data. Detta gör att du kan underhålla användardata över olika appsessioner.

Efter den här handledningen har du en funktionell Vue att göra-app som kan lägga till och ta bort uppgifter och lagra data med LocalStorage.

Konfigurera Vue To-Do-applikationen

Innan du börjar koda, se till att du har installerat Node och NPM på din enhet.

För att skapa ett nytt projekt, kör detta npm-kommando:

npm create vue

Kommandot kräver att du väljer en förinställning för din nya Vue-applikation innan du skapar och installerar nödvändiga beroenden.

Du behöver inga extra funktioner för denna att göra-app, så välj "Nej" för alla tillgängliga förinställningar.

instagram viewer

Med projektet inrättat kan du börja bygga att göra-applikationen med LocalStorage.

Skapar Att göra-applikationen

För den här handledningen kommer du att skapa två Vue-komponenter: App.vue för den övergripande strukturen och Todo.vue för att visa en lista med uppgifter.

Skapar Att göra-komponenten

För Todo-komponenten, skapa en ny fil, src/components/Todo.vue. Den här filen kommer att hantera strukturen för listan med uppgifter.

Klistra in följande kod i Todo.vue fil:


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

Ovanstående kodavsnitt beskriver strukturen för Att göra komponent. Den ställer in komponenten för att ta emot data och sända ut händelser genom användning av rekvisita respektive anpassade händelser.

För att förklara ytterligare använder koden Vue rekvisita för att kommunicera mellan komponenter att ta emot todos array från sin överordnade komponent, App.vue. Den använder sedan v-for direktiv för rendering av listor att iterera genom den mottagna todos-arrayen.

Koden avger också en anpassad händelse, ta bort att göra, med nyttolast index. Detta låter dig ta bort en viss uppgift med ett specifikt index i todos-arrayen.

När du klickar på Avlägsna knappen, utlöser kodavsnittet sändningen av den anpassade händelsen till den överordnade komponenten. Detta indikerar att du har klickat på knappen, vilket uppmanar dig att köra motsvarande funktion som definierats i den överordnade komponenten, App.vue.

Skapar programmets vykomponent

Gå över till App.vue för att fortsätta bygga Todo-applikationen. De App komponent kommer att hantera att lägga till nya uppgifter och rendera Att göra komponent.

Klistra in följande manus blockera i din App.vue-fil:


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

Ovanstående kodavsnitt beskriver logiken i App.vue komponent. Utdraget importerar Att göra komponent och initierar reaktiva variabler med Vue Composition API.

Koden börjar med importen av Todo-komponenten och ref funktion från den angivna sökvägen och vue, respektive.

Utdraget initierar sedan en reaktiv sträng, newTodo, för att lagra uppgiften du ska ange. Den initierar också en tom reaktiv todos array, håller listan med uppgifter.

De addTodo funktionen lägger till nya uppgifter till todos-arrayen. Om newTodo inte är tomt, skjuts det in i arrayen vid bekräftelse och återställer newTodo-värdet så att du kan lägga till fler uppgifter.

AddTodo-funktionen anropar också saveToLocalStorage, som sparar todos-arrayen i webbläsarens LocalStorage. Utdraget använder setItem metod för att uppnå detta och konverterar todos-arrayen till en JSON-sträng före lagring.

Den definierar också en ta bort Todo funktion som tar en nyckel som en parameter. Den använder denna nyckel för att ta bort motsvarande att göra från todos-arrayen. Efter borttagning anropar removeTodo-funktionen saveToLocalStorage för att uppdatera LocalStorage-data.

Slutligen använder koden getItem metod tillgänglig för LocalStorage för att hämta tidigare sparade uppgifter med todos-nyckeln. Om du har sparat uppgifter i webbläsarens LocalStorage, skjuter koden in dem i todos-arrayen.

Nu har du hanterat logiken i App.vue-komponenten, klistra in följande kod i mall block av din Vue-app för att skapa användargränssnittet:


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

Mallen använder v-modell, en metod för att binda data i Vue för att binda den inmatade uppgiften till newTodo reaktiv sträng. Mallen använder också v-pådirektiv för hantering av händelser i Vue genom dess stenografi (@).

Den använder v-on för att lyssna på både klick och stiga på nyckelhändelser för att bekräfta den nya Todo.

Slutligen använder mallen Att göra komponenten du skapade först för att rendera listan med uppgifter. De :todos syntaxen passerar todos array som ett stöd till Todo-komponenten.

De @remove-todo syntax ställer in en händelseavlyssnare för att fånga den anpassade händelsen som Todo-komponenten avgav och anropa ta bort Todo fungera som svar.

Nu har du slutfört ansökan kan du välja att styla den efter din smak. Du kan förhandsgranska din applikation genom att köra det här kommandot:

npm run dev

Du bör se en skärm som denna:

Du kan lägga till eller ta bort uppgifter i Todo-appen. Dessutom kan du, tack vare integrationen av LocalStorage, uppdatera applikationen eller avsluta den helt; din kurerade att göra-lista kommer att finnas kvar intakt.

Vikten av LocalStorage

LocalStorage-integrering i webbapplikationer är avgörande för både nybörjare och erfarna utvecklare. LocalStorage introducerar nybörjare till databeständighet genom att tillåta dem att lagra och hämta användargenererat innehåll.

LocalStorage är viktigt eftersom du kan säkerställa att din användardata förblir intakt under olika sessioner. LocalStorage eliminerar behovet av konstant serverkommunikation, vilket leder till snabbare laddningstider och förbättrad respons i webbapplikationer.