באמצעות האפליקציה המוכרת הזו לדוגמה, למד הכל על הדרך המודרנית לאחסון נתוני אינטרנט.

LocalStorage הוא ממשק API לאינטרנט, המובנה בדפדפנים, המאפשר ליישומי אינטרנט לאחסן צמדי מפתח-ערך במכשיר המקומי שלך. הוא מספק שיטה פשוטה לאחסון נתונים, גם לאחר סגירת הדפדפן.

אתה יכול לשלב את LocalStorage עם אפליקציות Vue שלך ​​כדי לאחסן רשימות ונתונים קטנים אחרים. זה מאפשר לך לשמור על נתוני משתמשים על פני הפעלות שונות של אפליקציות.

לאחר הדרכה זו, תהיה לך אפליקציית מטלות Vue פונקציונלית שיכולה להוסיף ולהסיר משימות, לאחסן את הנתונים באמצעות LocalStorage.

הגדרת אפליקציית Vue To-Do

לפני שתתחיל בקידוד, ודא שיש לך התקנת Node ו-NPM במכשיר שלך.

כדי ליצור פרויקט חדש, הפעל את פקודת npm זו:

npm create vue

הפקודה תצטרך אותך לבחור הגדרה מראש עבור יישום Vue החדש שלך לפני יצירה והתקנה של התלות הנדרשת.

לא תזדקק לתכונות נוספות עבור אפליקציית מטלות זו, אז בחר "לא" עבור כל הקביעות המוגדרות מראש הזמינות.

עם הגדרת הפרויקט, אתה יכול להתחיל לבנות את אפליקציית המטלות עם LocalStorage.

יצירת אפליקציית המטלות

עבור מדריך זה, תיצור שני רכיבי Vue: App.vue עבור המבנה הכללי ו-Todo.vue כדי להציג רשימה של משימות.

instagram viewer

יצירת רכיב המטלות

עבור רכיב 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 לתקשורת בין רכיבים לקבל את לעשות מערך מהרכיב האב שלו, App.vue. לאחר מכן הוא משתמש ב- הוראת v-for לעיבוד רשימות לחזור דרך מערך ה-todos שהתקבל.

הקוד גם משדר אירוע מותאם אישית, הסר-מטלה, עם מטען אינדקס. זה מאפשר לך להסיר משימה מסוימת עם אינדקס ספציפי במערך ה-todos.

בלחיצה על לְהַסִיר לחצן, קטע הקוד מפעיל את פליטת האירוע המותאם אישית לרכיב האב. זה מציין שלחצת על הכפתור, מה שמנחה את ביצוע הפונקציה המתאימה שהוגדרה בתוך רכיב האב, App.vue.

יצירת רכיב התצוגה של האפליקציה

פנה אל App.vue כדי להמשיך לבנות את אפליקציית Todo. ה אפליקציה הרכיב יטפל בהוספת משימות חדשות ובעיבוד ה- לעשות רְכִיב.

הדבק את הדברים הבאים תַסרִיט לחסום לקובץ 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 וה- ref פונקציה מהנתיב שצוין ו vue, בהתאמה.

לאחר מכן, הקטע מאתחל מחרוזת תגובתית, newTodo, כדי לאחסן את המשימה שתיכנס. זה גם מאתחל ריאקטיבי ריק לעשות מערך, מחזיק את רשימת המשימות.

ה addTodo הפונקציה מוסיפה משימות חדשות למערך ה-todos. אם newTodo אינו ריק, הוא נדחף למערך באישור ומאפס את ערך newTodo כדי לאפשר לך להוסיף עוד משימות.

הפונקציה addTodo מפעילה גם את saveToLocalStorage, מה ששומר את מערך ה-todos ב-LocalStorage של הדפדפן. הקטע משתמש ב- setItem שיטה להשיג זאת וממירה את מערך ה-todos למחרוזת JSON לפני האחסון.

הוא גם מגדיר את א הסרTodo פונקציה שלוקחת א מַפְתֵחַ כפרמטר. הוא משתמש במקש זה כדי להסיר את המתאים לעשות ממערך ה-todos. לאחר ההסרה, הפונקציה removeTodo קוראת ל-saveToLocalStorage כדי לעדכן את נתוני LocalStorage.

לבסוף, הקוד משתמש ב- getItem שיטה זמינה ל-LocalStorage כדי לאחזר משימות שנשמרו בעבר באמצעות מקש todos. אם שמרת משימות ב-LocalStorage של הדפדפן, הקוד דוחף אותן למערך ה-todos.

עכשיו טיפלת בהיגיון של רכיב 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.

לבסוף, התבנית משתמשת ב- לעשות רכיב שיצרת תחילה כדי להציג את רשימת המשימות. ה :לעשות תחביר עובר את לעשות מערך כעזר לרכיב Todo.

ה @remove-todo תחביר מגדיר מאזין אירועים כדי ללכוד את האירוע המותאם אישית שרכיב Todo פלט ולקרוא ל- הסרTodo לתפקד בתגובה.

כעת השלמת את היישום, אתה יכול לבחור לעצב אותו לפי טעמך. אתה יכול להציג תצוגה מקדימה של היישום שלך על ידי הפעלת הפקודה הזו:

npm run dev

אתה אמור לראות מסך כזה:

ניתן להוסיף או להסיר משימות בתוך אפליקציית Todo. יתרה מכך, הודות לשילוב של LocalStorage, ניתן לרענן את האפליקציה או לצאת ממנה לחלוטין; רשימת המטלות האוצרת שלך תישאר ללא פגע.

החשיבות של LocalStorage

שילוב LocalStorage ביישומי אינטרנט חיוני הן למפתחים מתחילים והן למפתחים מנוסים. LocalStorage מציג למתחילים את התמדה של נתונים על ידי כך שהוא מאפשר להם לאחסן ולאחזר תוכן שנוצר על ידי משתמשים.

LocalStorage חשוב מכיוון שאתה יכול להבטיח שנתוני המשתמש שלך יישארו שלמים בהפעלות שונות. LocalStorage מבטל את הצורך בתקשורת שרת מתמדת, מה שמוביל לזמני טעינה מהירים יותר ושיפור היענות ביישומי אינטרנט.