Χρησιμοποιώντας αυτό το γνώριμο δείγμα εφαρμογής, μάθετε τα πάντα για τον σύγχρονο τρόπο αποθήκευσης δεδομένων ιστού.

Το LocalStorage είναι ένα web API, ενσωματωμένο σε προγράμματα περιήγησης, το οποίο επιτρέπει στις εφαρμογές Ιστού να αποθηκεύουν ζεύγη κλειδιών-τιμών στην τοπική συσκευή σας. Παρέχει μια απλή μέθοδο αποθήκευσης δεδομένων, ακόμη και αφού κλείσετε το πρόγραμμα περιήγησής σας.

Μπορείτε να ενσωματώσετε το LocalStorage με τις εφαρμογές σας Vue για να αποθηκεύσετε λίστες και άλλα δεδομένα μικρού μεγέθους. Αυτό σας επιτρέπει να διατηρείτε δεδομένα χρήστη σε διαφορετικές περιόδους σύνδεσης εφαρμογών.

Μετά από αυτό το σεμινάριο, θα έχετε μια λειτουργική εφαρμογή Vue to-do που μπορεί να προσθέτει και να αφαιρεί εργασίες, αποθηκεύοντας τα δεδομένα χρησιμοποιώντας το LocalStorage.

Ρύθμιση της εφαρμογής Vue To-Do

Πριν ξεκινήσετε την κωδικοποίηση, βεβαιωθείτε ότι έχετε εγκατεστημένα Node και NPM στη συσκευή σας.

Για να δημιουργήσετε ένα νέο έργο, εκτελέστε αυτήν την εντολή npm:

npm create vue
instagram viewer

Η εντολή θα σας ζητήσει να επιλέξετε μια προεπιλογή για τη νέα σας εφαρμογή Vue πριν δημιουργήσετε και εγκαταστήσετε τις απαραίτητες εξαρτήσεις.

Δεν θα χρειαστείτε επιπλέον λειτουργίες για αυτήν την εφαρμογή υποχρεώσεων, επομένως επιλέξτε "Όχι" για όλες τις διαθέσιμες προεπιλογές.

Με τη ρύθμιση του έργου, μπορείτε να ξεκινήσετε τη δημιουργία της εφαρμογής υποχρεώσεων με το LocalStorage.

Δημιουργία της εφαρμογής To-Do

Για αυτό το σεμινάριο, θα δημιουργήσετε δύο στοιχεία Vue: App.vue για τη συνολική δομή και Todo.vue για εμφάνιση μιας λίστας εργασιών.

Δημιουργία του στοιχείου εκκρεμοτήτων

Για το στοιχείο Todo, δημιουργήστε ένα νέο αρχείο, src/components/Todo.vue. Αυτό το αρχείο θα χειριστεί τη δομή της λίστας εργασιών.

Επικολλήστε τον παρακάτω κώδικα στο Todo.vue αρχείο:


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

Το παραπάνω απόσπασμα κώδικα περιγράφει λεπτομερώς τη δομή του Να κάνω συστατικό. Ρυθμίζει το στοιχείο ώστε να λαμβάνει δεδομένα και να εκπέμπει συμβάντα μέσω της χρήσης στηρίξεων και προσαρμοσμένων συμβάντων, αντίστοιχα.

Για να εξηγήσουμε περαιτέρω, ο κώδικας χρησιμοποιεί Υποστηρίγματα Vue για επικοινωνία μεταξύ εξαρτημάτων να λάβετε το todos πίνακας από το μητρικό του στοιχείο, App.vue. Στη συνέχεια χρησιμοποιεί το Οδηγία v-for για απόδοση λιστών για επανάληψη μέσω του ληφθέντος πίνακα εργασιών.

Ο κώδικας εκπέμπει επίσης ένα προσαρμοσμένο συμβάν, αφαιρώ-todo, με ωφέλιμο φορτίο δείκτης. Αυτό σας επιτρέπει να αφαιρέσετε μια συγκεκριμένη εργασία με ένα συγκεκριμένο ευρετήριο στον πίνακα εργασιών.

Κάνοντας κλικ στο Αφαιρώ κουμπί, το απόσπασμα ενεργοποιεί την εκπομπή του προσαρμοσμένου συμβάντος στο γονικό στοιχείο. Αυτό υποδηλώνει ότι έχετε κάνει κλικ στο κουμπί, ζητώντας την εκτέλεση της αντίστοιχης λειτουργίας που ορίζεται στο γονικό στοιχείο, App.vue.

Δημιουργία του στοιχείου προβολής της εφαρμογής

Κατευθυνθείτε προς App.vue για να συνεχίσετε τη δημιουργία της εφαρμογής Todo. ο App Το στοιχείο θα χειριστεί την προσθήκη νέων εργασιών και την απόδοση του Να κάνω συστατικό.

Επικολλήστε το παρακάτω γραφή αποκλεισμός στο αρχείο 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>

Το παραπάνω απόσπασμα κώδικα περιγράφει τη λογική του App.vue συστατικό. Το απόσπασμα εισάγει το Να κάνω στοιχείο και αρχικοποιεί αντιδραστικές μεταβλητές με το Vue Composition API.

Ο κώδικας ξεκινά με την εισαγωγή του στοιχείου Todo και του αναφ λειτουργία από την καθορισμένη διαδρομή και vue, αντίστοιχα.

Στη συνέχεια, το απόσπασμα αρχικοποιεί μια αντιδραστική συμβολοσειρά, newTodo, για να αποθηκεύσετε την εργασία που θα εισαγάγετε. Αρχικοποιεί επίσης ένα κενό αντιδραστικό todos πίνακα, κρατώντας τη λίστα εργασιών.

ο addTodo Η συνάρτηση προσθέτει νέες εργασίες στον πίνακα εργασιών. Εάν το newTodo δεν είναι κενό, ωθείται στον πίνακα κατά την επιβεβαίωση και επαναφέρει την τιμή newTodo για να σας επιτρέψει να προσθέσετε περισσότερες εργασίες.

Η συνάρτηση addTodo καλεί επίσης το saveToLocalStorage, που αποθηκεύει τον πίνακα εργασιών στο LocalStorage του προγράμματος περιήγησης. Το απόσπασμα χρησιμοποιεί το setItem μέθοδος για να επιτευχθεί αυτό και μετατρέπει τον πίνακα todos σε συμβολοσειρά JSON πριν από την αποθήκευση.

Ορίζει επίσης α removeTodo λειτουργία που παίρνει α κλειδί ως παράμετρος. Χρησιμοποιεί αυτό το κλειδί για να αφαιρέσει το αντίστοιχο να κάνω από τον πίνακα todos. Μετά την αφαίρεση, η συνάρτηση removeTodo καλεί το saveToLocalStorage για να ενημερώσει τα δεδομένα LocalStorage.

Τέλος, ο κώδικας χρησιμοποιεί το getItem μέθοδος διαθέσιμη στο LocalStorage για ανάκτηση εργασιών που έχουν αποθηκευτεί προηγουμένως με το κλειδί εκκρεμοτήτων. Εάν έχετε αποθηκεύσει εργασίες στο LocalStorage του προγράμματος περιήγησης, ο κώδικας τις σπρώχνει στον πίνακα εργασιών.

Τώρα που έχετε χειριστεί τη λογική του στοιχείου App.vue, επικολλήστε τον ακόλουθο κώδικα στο πρότυπο μπλοκ της εφαρμογής Vue για τη δημιουργία της διεπαφής χρήστη:


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

Το πρότυπο χρησιμοποιεί v-μοντέλο, μια μέθοδος δέσμευσης δεδομένων στο Vue για να συνδέσετε το εισαγόμενο todo στο newTodo αντιδραστική συμβολοσειρά. Το πρότυπο χρησιμοποιεί επίσης το v-onοδηγία για το χειρισμό συμβάντων στο Vue μέσω της στενογραφίας του (@).

Χρησιμοποιεί v-on για να ακούσει και τα δύο Κάντε κλικ και εισαγω βασικά συμβάντα για επιβεβαίωση του newTodo.

Τέλος, το πρότυπο χρησιμοποιεί το Να κάνω στοιχείο που δημιουργήσατε πρώτα για να αποδώσει τη λίστα των εργασιών. ο :todos σύνταξη περνά το todos συστοιχία ως στήριγμα στο στοιχείο Todo.

ο @remove-todo σύνταξη ρυθμίζει ένα πρόγραμμα ακρόασης συμβάντων για να καταγράψει το προσαρμοσμένο συμβάν που εξέπεμψε το στοιχείο Todo και να το καλέσει removeTodo λειτουργούν ως απόκριση.

Τώρα που έχετε ολοκληρώσει την εφαρμογή, μπορείτε να επιλέξετε να την διαμορφώσετε σύμφωνα με το γούστο σας. Μπορείτε να κάνετε προεπισκόπηση της εφαρμογής σας εκτελώντας αυτήν την εντολή:

npm run dev

Θα πρέπει να δείτε μια οθόνη όπως αυτή:

Μπορείτε να προσθέσετε ή να αφαιρέσετε εργασίες στην εφαρμογή Todo. Επιπλέον, χάρη στην ενσωμάτωση του LocalStorage, μπορείτε να ανανεώσετε την εφαρμογή ή να πραγματοποιήσετε πλήρη έξοδο από αυτήν. Η επιμελημένη λίστα εργασιών σας θα παραμείνει ανέπαφη.

Σημασία του LocalStorage

Η ενσωμάτωση LocalStorage σε εφαρμογές web είναι απαραίτητη τόσο για αρχάριους όσο και για έμπειρους προγραμματιστές. Το LocalStorage εισάγει στους αρχάριους τη διατήρηση δεδομένων, επιτρέποντάς τους να αποθηκεύουν και να ανακτούν περιεχόμενο που δημιουργείται από τους χρήστες.

Το LocalStorage είναι σημαντικό καθώς μπορείτε να διασφαλίσετε ότι τα δεδομένα χρήστη σας παραμένουν ανέπαφα σε διαφορετικές περιόδους σύνδεσης. Το LocalStorage εξαλείφει την ανάγκη για συνεχή επικοινωνία με διακομιστή, οδηγώντας σε ταχύτερους χρόνους φόρτωσης και βελτιωμένη απόκριση στις εφαρμογές web.