] इस लेख में, हम IndexedDB पर चर्चा करते हैं। आपको इस लोकलस्टोरेज एपीआई से परिचित होना चाहिए, आमतौर पर ब्राउज़र में जानकारी संग्रहीत करने के लिए उपयोग किया जाता है। इसी तरह, IndexEDDB का उपयोग क्लाइंट साइड स्टोरेज के लिए किया जाता है।

indexedDB क्या है?

mdn प्रलेखन व्याख्या:

IndexEDDB फाइलों/बूँदों सहित संरचित डेटा की महत्वपूर्ण मात्रा के क्लाइंट-साइड स्टोरेज के लिए एक निम्न-स्तरीय एपीआई है। यह एपीआई इस डेटा की उच्च-प्रदर्शन खोजों को सक्षम करने के लिए इंडेक्स का उपयोग करता है। जबकि वेब स्टोरेज छोटी मात्रा में डेटा संग्रहीत करने के लिए उपयोगी है, यह बड़ी मात्रा में संरचित डेटा के संग्रहीत करने के लिए कम उपयोगी है।

IndexedDB एक समाधान प्रदान करता है। यह MDN के IndexEDDB कवरेज के लिए मुख्य लैंडिंग पृष्ठ है - यहां हम पूर्ण एपीआई संदर्भ और उपयोग गाइड, ब्राउज़र समर्थन विवरण, और प्रमुख अवधारणाओं के कुछ स्पष्टीकरण के लिंक प्रदान करते हैं।

उदाहरण रिपॉजिटरी:

] ]

window.onload = () => { }

डेटाबेस के लिए एक अनुरोध खोलें:

window.onload = () => {
}

संपर्क त्रुटि:

] DbopenRequest.onerror = (घटना) => { नोट ।AppendChild (CreateListItem ('त्रुटि लोडिंग डेटाबेस।')); };

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

सफल डेटाबेस कनेक्शन पर: ] नोट.पेंडचाइल्ड (CreateListItem ('डेटाबेस इनिशियलाइज्ड।')); // DB चर में डेटाबेस खोलने के परिणाम को स्टोर करें। इसका उपयोग बहुत नीचे किया जाता है db = dbopenrequest.result; // DisplayData () फ़ंक्शन को कार्य सूची को पॉप्युलेट करने के लिए सभी टू-डू सूची डेटा के साथ पहले से displayData (); };

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

डेटा जोड़ें

] const लेनदेन = db.Transaction (['टोडोलिस्ट'], 'रीडराइट'); // किसी ऑब्जेक्ट स्टोर को कॉल करें जो पहले से ही डेटाबेस में जोड़ा गया है const objectStore = Transaction.ObjectStore ('todolist'); // ऑब्जेक्ट स्टोर में हमारे newitem ऑब्जेक्ट को जोड़ने का अनुरोध करें const objectstorerequest = objectstore.add (newItem [0]); objectstorerequest.onsuccess = (घटना) => { // सफलता पर डेटा प्रक्रिया। } // लेन -देन की सफलता पर रिपोर्ट पूरा करने पर, जब सब कुछ हो जाता है लेन -देन। नोट ।AppendChild (CreateListItem ('लेनदेन पूरा: डेटाबेस संशोधन समाप्त।')); // फिर से डिस्प्लेडाटा () चलाकर नए जोड़े गए आइटम को दिखाने के लिए डेटा के प्रदर्शन को अपडेट करें। displayData (); }; // किसी भी अप्रत्याशित त्रुटि के लिए हैंडलर लेन -देन। onerror = () => { नोट ।AppendChild (createListItem (`लेन -देन त्रुटि के कारण नहीं खोला गया: $ {लेनदेन। error}`)); };

]

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

]

dexie के साथ डेटा जोड़ें:

] const [नाम, setName] = usestate (''); const [आयु, सेटेज] = usestate (डिफ़ॉल्टेज); const [स्थिति, setStatus] = usestate (''); async फ़ंक्शन जोड़ें () { कोशिश { // नया दोस्त जोड़ें! const id = db.friends.add ({({ नाम, आयु }); सेटस्टैटस (`मित्र $ {नाम} सफलतापूर्वक जोड़ा गया। आईडी $ {आईडी}`) मिला; setName (''); सेटेज (डिफ़ॉल्टेज); } पकड़ (त्रुटि) { setStatus (`$ {नाम} जोड़ने में विफल रहा}: $ {त्रुटि}`); } } वापस करना (

{स्थिति}

नाम: setName (ev.target.value)} /> आयु: setage (संख्या (ev.target.value))}} /> जोड़ें बटन> > ); }

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

हमारे बारे में:

थिंकथ्रू में, हम बड़े खुले स्रोत परियोजनाओं का अध्ययन करते हैं और वास्तुशिल्प गाइड प्रदान करते हैं। हमने Tailwind के साथ निर्मित resubale घटक विकसित किए हैं, जिसका उपयोग आप अपनी परियोजना में कर सकते हैं। हम Next.js, प्रतिक्रिया और नोड विकास सेवाओं की पेशकश करते हैं।

अपनी परियोजना पर चर्चा करने के लिए हमारे साथ एक बैठक बुक करें।

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 
 
{status}
 Name:
  setName(ev.target.value)}
 />
 Age:
  setAge(Number(ev.target.value))}
 />
 Add
 >
 );
}

संदर्भ:

] ] ] ]