Adăugarea obiectelor în depozit
Pentru a adăuga obiecte în depozitul bazei de date IndexDB, se folosește metoda add() a obiectului IDBObjectStore:
add(value): valoarea care trebuie adăugată este primul parametru.
add(value, key): al doilea parametru, opțional, indică cheia obiectului. Dacă nu este specificat, cheia este considerată null implicit.Alegerea de a specifica o cheie și tipul acesteia depinde de setările de configurare ale depozitului stabilite la crearea acestuia:
- keyPath: definește numele proprietății care va servi ca cheie pentru obiecte
- autoIncrement: atunci când este setat pe true, cheile sunt generate automat. Implicit, acesta este setat pe false, indicând că cheile nu sunt generate automat
Modul în care este utilizată cheia este determinat de combinațiile specifice ale parametrilor keyPath și autoIncrement.
Rezultatul metodei add() este un obiect IDBRequest. În cazul unei adăugări de succes, la acest obiect se declanșează evenimentul success, iar proprietatea sa result conține cheia obiectului adăugat. În caz de eroare, se generează evenimentul error împreună cu o excepție de tip DOMException. Pentru a gestiona aceste evenimente, se pot folosi proprietățile onsuccess și onerror, respectiv.
De exemplu, să adăugăm un singur obiect:
const request = indexedDB.open("test", 5); // ne conectăm la baza de date test
// la crearea sau actualizarea versiunii bazei de date, creăm în ea un depozit users
request.onupgradeneeded = (event) => {
const db = event.target.result; // obținem baza de date
// cheia este proprietatea id, și este autoincrementată
db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
};
// la deschiderea bazei de date adăugăm în depozitul users 1 obiect
request.onsuccess = (event) => {
const db = event.target.result; // obținem baza de date
const transaction = db.transaction(["users"], "readwrite"); // creăm o tranzacție
const userStore = transaction.objectStore("users"); // obținem depozitul users
const tom = {name: "Tom", age: 39};
const addRequest = userStore.add(tom); // adăugăm obiectul tom în depozitul userStore
addRequest.onsuccess = (event) => {
console.log("Datele au fost adăugate cu succes");
console.log("id-ul înregistrării adăugate:", addRequest.result); // id-ul înregistrării adăugate: 1
};
};Aici, în baza de date test este creat depozitul "users", în care ca cheie servește proprietatea id, și această proprietate este autoincrementată la adăugarea fiecărui obiect nou. Adică, obiectul adăugat poate să nu conțină o asemenea proprietate.
P.S. Pentru celor ce nu le-a fost clar unde trebuie rulat codul, creăm un fișier de tip html, spre exemplu, runserverjs.html, în folderul care l-ați folosit în temele anteriare ( în cazul meu C:\ app). Acolo adăugați codul ( să nu uitați de structura html, codul trebuie să fie adăugat între <script> și </script>), iar după asta faceți click pe el. După ce aparea fereastra, apăsați F12.
În acest caz, adăugăm un singur obiect cu două proprietăți, name și age:
const tom = {name: "Tom", age: 39};
const addRequest = userStore.add(tom);La adăugarea cu succes, addRequest.result conține cheia - valoarea proprietății id a obiectului adăugat:
addRequest.onsuccess = (event) => {
console.log("Datele au fost adăugate cu succes");
console.log("id-ul înregistrării adăugate:", addRequest.result); // id-ul înregistrării adăugate: 1
};Aceeași valoare poate fi obținută prin parametrul handlerului și proprietatea sa event.target.result
console.log("id-ul înregistrării adăugate:", event.target.result);Este important de menționat că adăugarea datelor nu se întâmplă imediat după apelul metodei add(), ci se finalizează după un anumit timp. Prin urmare, pentru a urmări operațiunea se utilizează handlerul onsuccess.
Să adăugăm încă câteva obiecte:
const bob = {name: "Bob", age: 43};
const sam = {name: "Sam", age: 28};
userStore.add(bob);
userStore.add(sam);Vizualizarea conținutului în browser
Este de remarcat că browserele moderne ne permit să vizualizăm conținutul IndexDB prin instrumentele de dezvoltare. Astfel, în Google Chrome, această funcționalitate este disponibilă pe tabul Application la selectarea din meniul din stânga a opțiunii Storage/IndexDB.
