इस परिचित नमूना ऐप का उपयोग करके, वेब डेटा संग्रहीत करने के आधुनिक तरीके के बारे में सब कुछ जानें।
लोकलस्टोरेज एक वेब एपीआई है, जो ब्राउज़र में बनाया गया है, जो वेब एप्लिकेशन को आपके स्थानीय डिवाइस पर कुंजी-मूल्य जोड़े को संग्रहीत करने देता है। यह आपके ब्राउज़र को बंद करने के बाद भी डेटा संग्रहीत करने की एक सरल विधि प्रदान करता है।
आप सूचियों और अन्य छोटे आकार के डेटा को संग्रहीत करने के लिए लोकलस्टोरेज को अपने Vue ऐप्स के साथ एकीकृत कर सकते हैं। यह आपको विभिन्न ऐप सत्रों में उपयोगकर्ता डेटा बनाए रखने की अनुमति देता है।
इस ट्यूटोरियल के बाद, आपके पास एक कार्यात्मक Vue टू-डू ऐप होगा जो लोकलस्टोरेज का उपयोग करके डेटा संग्रहीत करते हुए कार्यों को जोड़ और हटा सकता है।
Vue To-Do एप्लिकेशन सेट करना
इससे पहले कि आप कोडिंग शुरू करें, सुनिश्चित करें कि आपके पास है आपके डिवाइस पर नोड और एनपीएम स्थापित करें.
एक नया प्रोजेक्ट बनाने के लिए, यह npm कमांड चलाएँ:
npm create vue
आवश्यक निर्भरताएँ बनाने और स्थापित करने से पहले कमांड को आपको अपने नए Vue एप्लिकेशन के लिए एक प्रीसेट का चयन करने की आवश्यकता होगी।
आपको इस टू-डू ऐप के लिए अतिरिक्त सुविधाओं की आवश्यकता नहीं होगी, इसलिए सभी उपलब्ध प्रीसेट के लिए "नहीं" चुनें।
प्रोजेक्ट सेट अप के साथ, आप लोकलस्टोरेज के साथ टू-डू एप्लिकेशन का निर्माण शुरू कर सकते हैं।
टू-डू एप्लिकेशन बनाना
इस ट्यूटोरियल के लिए, आप दो Vue घटक बनाएंगे: समग्र संरचना के लिए App.vue और कार्यों की सूची प्रदर्शित करने के लिए Todo.vue।
टू-डू घटक बनाना
टोडो घटक के लिए, एक नई फ़ाइल बनाएं, 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 के भीतर परिभाषित संबंधित फ़ंक्शन के निष्पादन को प्रेरित करता है।
एप्लिकेशन का दृश्य घटक बनाना
वहां जाओ ऐप.व्यू टोडो एप्लिकेशन का निर्माण जारी रखने के लिए। अनुप्रयोग घटक नए कार्यों को जोड़ने और उन्हें प्रस्तुत करने का काम संभालेगा करने के लिए अवयव।
निम्नलिखित चिपकाएँ लिखी हुई कहानी अपनी 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>
उपरोक्त कोड स्निपेट इसके तर्क को रेखांकित करता है ऐप.व्यू अवयव। स्निपेट आयात करता है करने के लिए घटक और Vue कंपोज़िशन API के साथ प्रतिक्रियाशील चर प्रारंभ करता है।
कोड टोडो घटक और के आयात से शुरू होता है संदर्भ निर्दिष्ट पथ से कार्य करें और वीयूई, क्रमश।
स्निपेट फिर एक प्रतिक्रियाशील स्ट्रिंग आरंभ करता है, newTodo, आपके द्वारा दर्ज किए जाने वाले कार्य को संग्रहीत करने के लिए। यह एक खाली रिएक्टिव को भी आरंभ करता है सब सरणी, कार्यों की सूची रखती है।
addTodo फ़ंक्शन टोडोस सरणी में नए कार्य जोड़ता है। यदि न्यूटोडो खाली नहीं है, तो पुष्टि होने पर इसे सरणी में धकेल दिया जाता है और आपको अधिक कार्य जोड़ने की अनुमति देने के लिए न्यूटोडो मान को रीसेट कर दिया जाता है।
AddTodo फ़ंक्शन भी इनवॉइस करता है सेवटूलोकलस्टोरेज, जो ब्राउज़र के लोकलस्टोरेज में टूडोस ऐरे को सेव करता है। स्निपेट का उपयोग करता है सेटआइटम इसे प्राप्त करने की विधि और भंडारण से पहले टोडोस सरणी को JSON स्ट्रिंग में परिवर्तित करती है।
यह एक को भी परिभाषित करता है हटाएँTodo वह फ़ंक्शन जो a लेता है चाबी एक पैरामीटर के रूप में. यह संबंधित को हटाने के लिए इस कुंजी का उपयोग करता है करने के लिए टोडोस सरणी से. हटाने के बाद, रिमूवटोडो फ़ंक्शन लोकलस्टोरेज डेटा को अपडेट करने के लिए saveToLocalStorage को कॉल करता है।
अंत में, कोड का उपयोग करता है वस्तु ले आओ टोडोस कुंजी के साथ पहले से सहेजे गए कार्यों को लाने के लिए लोकलस्टोरेज के लिए विधि उपलब्ध है। यदि आपने ब्राउज़र के लोकलस्टोरेज में कार्य सहेजे हैं, तो कोड उन्हें टोडोस सरणी में धकेल देता है।
अब आपने 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>
टेम्प्लेट का उपयोग करता है वि मॉडल, Vue में डेटा बाइंडिंग की एक विधि इनपुट किए गए कार्य को बाइंड करने के लिए newTodo प्रतिक्रियाशील स्ट्रिंग. टेम्प्लेट का भी उपयोग करता है वि परVue में घटनाओं को संभालने के लिए निर्देश इसके आशुलिपि के माध्यम से (@).
यह दोनों को सुनने के लिए v-on का उपयोग करता है क्लिक और प्रवेश करना न्यूटूडो की पुष्टि के लिए प्रमुख घटनाएँ।
अंत में, टेम्पलेट का उपयोग करता है करने के लिए घटक जिसे आपने सबसे पहले कार्यों की सूची प्रस्तुत करने के लिए बनाया था। :todos सिंटेक्स पास करता है सब टोडो घटक के लिए एक प्रोप के रूप में सरणी।
@हटाओ-करो सिंटैक्स टोडो घटक द्वारा उत्सर्जित कस्टम इवेंट को कैप्चर करने और कॉल करने के लिए एक इवेंट श्रोता सेट करता है हटाएँTodo प्रतिक्रिया में कार्य करें।
अब आपने आवेदन पूरा कर लिया है, आप इसे अपनी पसंद के अनुसार स्टाइल करना चुन सकते हैं। आप यह आदेश चलाकर अपने एप्लिकेशन का पूर्वावलोकन कर सकते हैं:
npm run dev
आपको इस तरह की एक स्क्रीन देखनी चाहिए:
आप टोडो एप्लिकेशन के भीतर कार्यों को जोड़ या हटा सकते हैं। इसके अलावा, लोकलस्टोरेज के एकीकरण के लिए धन्यवाद, आप एप्लिकेशन को रीफ्रेश कर सकते हैं या इससे पूरी तरह बाहर निकल सकते हैं; आपकी क्यूरेटेड टू-डू सूची बरकरार रहेगी।
लोकलस्टोरेज का महत्व
वेब अनुप्रयोगों में लोकलस्टोरेज एकीकरण नौसिखिए और अनुभवी डेवलपर्स दोनों के लिए आवश्यक है। लोकलस्टोरेज शुरुआती लोगों को उपयोगकर्ता-जनित सामग्री को संग्रहीत और पुनर्प्राप्त करने की अनुमति देकर डेटा दृढ़ता से परिचित कराता है।
लोकलस्टोरेज महत्वपूर्ण है क्योंकि आप यह सुनिश्चित कर सकते हैं कि आपका उपयोगकर्ता डेटा विभिन्न सत्रों में बरकरार रहे। लोकलस्टोरेज निरंतर सर्वर संचार की आवश्यकता को समाप्त करता है, जिससे लोड समय तेज होता है और वेब अनुप्रयोगों में प्रतिक्रिया में सुधार होता है।
