Share
Bine ați venit la partea a doua a articolului IndexedDB. eu tare recomandăm citirea primului articol din această serie, deoarece voi presupune că sunteți familiarizat cu toate conceptele acoperite până acum. În acest articol, vom încheia aspectele CRUD pe care nu le-am finalizat înainte (în special actualizarea și ștergerea conținutului) și apoi demonstram o aplicație reală pe care o vom folosi pentru a demonstra alte concepte în articolul final.
Să începem prin discutarea modului de actualizare a unei înregistrări cu IndexedDB. Dacă vă aduceți aminte, adăugarea datelor a fost destul de simplă:
// Definirea unei persoane var person = nume: nume, email: email, creat: new Date () // Efectuați add var request = store.add (person);
Actualizarea unei înregistrări este la fel de simplă. Presupunând că ați definit o proprietate numită id ca cheia pentru magazinul dvs. de obiecte, puteți pur și simplu utiliza a pune în loc de adăuga.
var person = nume: nume, email: email, creat: new Date (), id: someId // Efectuați actualizarea var request = store.put (person);
Ca adăuga , puteți să atribuiți metode pentru a gestiona rezultatele asincrone ale operației.
Ștergerea înregistrărilor se face prin metoda de ștergere. (O surpriză mare acolo.) Trebuie doar să treci în identificatorul unic al înregistrării pe care vrei să o elimini. Iată un exemplu simplu:
Accentsconagua
var t = db.transaction (["oameni", "readwrite"); var request = t.objectStore ("oameni") șterge (thisId); Și ca orice alt aspect al IndexedDB, puteți adăuga mânerele pentru rezultatele asincrone.
Deci, așa cum am spus, nu este foarte interesant, ceea ce este probabil bun. Vrei ca API-urile tale să fie simple, plictisitoare și surprinzătoare. Acum să luăm ceea ce am învățat și să-i aducem împreună pentru a crea o aplicație reală, dacă este simplă.
Ok, în sfârșit, avem toate (bine, majoritatea) părțile de care avem nevoie pentru a construi o aplicație reală. Deoarece nu a fost făcută înainte (hm), vom construi o notă simplă luând aplicația. Să ne uităm la câteva fotografii și apoi vă voi arăta codul din spatele ei. La lansare, aplicația inițializează un indexedDB pentru aplicație și redă o tabelă goală. Inițial, tot ce puteți face cu aplicația este să adăugați o notă nouă. (Am putea face acest lucru un pic cam mai ușor de utilizat, probabil.)
Dând clic pe Adauga notita butonul deschide un formular:
După introducerea unor date în formular, puteți salva nota:
După cum puteți vedea, aveți opțiunea de a edita și șterge note. În cele din urmă, dacă faceți clic pe rândul în sine, puteți citi nota:
Deci, nu exact știința rachetelor, ci un exemplu de lucru complet al specificației IndexedDB. Notele scrise aici vor persista. Puteți să închideți browserul, să reporniți aparatul, să vă opriți câțiva ani pentru a contempora viața și poezia și când deschideți din nou browserul, datele dvs. vor rămâne acolo. Să aruncăm o privire la codul acum.
În primul rând - o clauză de respingere a responsabilității. Această aplicație ar fi fost un candidat perfect pentru unul dintre multele cadre JavaScript. Sunt sigur că cei dintre voi care folosesc Backbone sau Angular vă pot imagina deja cum ați face acest lucru. Cu toate acestea - am luat decizia îndrăzneață aici nu utilizați un cadru. Am fost îngrijorat atât de oamenii care pot folosi un cadru diferit, cât și de cei care nu folosesc niciunul. Am vrut ca accentul nostru să fie doar pe aspectele IndexedDB. Aștept pe deplin unii oameni să nu fie de acord cu această decizie, dar haideți-l în comentariu.
Primul nostru șablon este fișierul HTML. Avem doar una și cea mai mare parte este boilerplate Bootstrap:
Notă Bază de date Notă Bază de dateEditați Notă
După cum sa menționat mai sus, o porțiune de dimensiune bună a acestui fișier este codul de șablon pentru Bootstrap. Partile de care ne intereseaza sunt noteList div, noteDetail div, și noteForm. Probabil că puteți presupune că acestea sunt DIV-urile pe care le vom actualiza, pe măsură ce utilizatorul face clic în aplicație.
Acum, să aruncăm o privire la app.js, fișierul de bază care gestionează logica pentru aplicația noastră.
/ * consolă globală, $, document, fereastră, alertă * / var db; funcția dtFormat (intrare) if (! input) return ""; var res = (input.getMonth () + 1) + "/" + input.getDate () + "/" + input.getFullYear () + ""; var ora = input.getHours (); var ampm = "AM"; dacă (ora === 12) ampm = "PM"; dacă (oră> 12) oră = 12; ampm = "PM"; var minut = input.getMinutes () + 1; dacă (minut < 10) minute = "0" + minute; res += hour + ":" + minute + " " + ampm; return res;
Puteți ignora prima funcție deoarece este pur și simplu un utilitar de formatare pentru date. Să trecem mai departe la blocul pregătit pentru documentul jQuery.
$ (document) .ready (funcția () if (! ("indexedDB" în fereastră)) alert ("Suport indexedDB necesar pentru această demonstrație! ; var $ noteForm = $ ("# noteForm"); var openRequest = fereastra.indexedDB.open ("nettuts_notes_1", 1); openRequest.onerror = funcția (e) console.log .dir (e); openRequest.onupgradeneeded = funcția (e) var thisDb = e.target.result; var objectStore; // Creare notă OS dacă (! thisDb.objectStoreNames.contains ("note")) .log ("Trebuie să fac nota obiectelor"); objectStore = thisDb.createObjectStore ("notă", keyPath: "id", autoIncrement: true); = e.target.result; db.onerror = function (event) // Generator de erori pentru toate erorile direcționate către // requests alert ("eroare de bază de date:" + event.target.errorCode); (event.target);; displayNotes ();; Prima noastră acțiune este să verificăm suportul pentru IndexedDB. Dacă browserul utilizatorului nu este compatibil, vom folosi o alertă și vom întrerupe funcția. Ar fi mai bine să le mutați pe o pagină care să explice pe deplin de ce nu pot folosi aplicația. (Și pentru a fi clar, am putea construi și o aplicație care a făcut uz de WebSQL ca o copie de siguranță. Dar din nou - accentul meu este aici pe simplitate.)
După ce am cachezat câțiva selectori de jQuery, pe care le vom folosi în întreaga aplicație, vom deschide baza noastră de date IndexedDB. Baza de date este destul de simplă. În onupgradeneeded handler puteți vedea un magazin de obiecte numit notițe fiind creat. După ce se termină totul, onsuccess handler va declanșa un apel către displayNotes.
displayNotes Funcţiefuncția displayNotes () var transaction = db.transaction (["notă"], "readonly"); var content = "
| Titlu | La curent | |
|---|---|---|
| "+ Cursor.value.title +" | "; conținut + =""+ DtFormat (cursor.value.updated) +" | "; conținut + ="Editați Ștergeți | "; conținut + ="
displayNotes funcția face ceea ce vă așteptați - obțineți toate datele și afișați-le. Am discutat cum să obținem toate rândurile de date în intrarea anterioară, dar vreau să subliniez ceva ușor diferit în legătură cu acest exemplu. Rețineți că avem un nou dispozitiv de gestionare a evenimentelor, onComplete, că ne-am legat de tranzacția însăși. Anterior, am folosit evenimente doar în cadrul acțiunilor, interior tranzacția, dar indexedDB ne permite să o facem și la nivelul superior. Acest lucru devine deosebit de util într-un caz ca acesta. Avem un șir uriaș, tabelul nostru HTML, pe care îl construim pe fiecare iterație a datelor noastre. Putem folosi tranzacția onComplete handler pentru a încheia porțiunea de afișare și a scrie-o folosind un apel simplu jQuery.
Șterge, Editați | ×, și Adăuga funcţii $ ("# noteList") pe ("click", "a.delete", funcția (e) var thisId = $ (this) .parent () = db.transaction (["notă"], "readwrite"); var request = t.objectStore ("notă") delete (thisId); (); $ noteForm.hide ();; return false;); $ ("# noteList") pe ("click", "a.edit", funcția (e) var thisId = $ (this) = request_resistance = function (event) var note = request.result; $ ("# cheie" ) .val (note.id); $ ("# titlu"); val (note.title); $ ("# body"); ();; return false;); $ ("# noteList") pe ("click", "td", function () var thisId = $ (this) .parent () note = request.onsuccess = function (event) var note = request.result; $ noteDetail.html ("note");"+ Note.title +"
"+ Note.body +"
") (" click "), funcția (e) $ (" # title ") val (" ); $ ("# body"); val (""); $ ("# cheie"); Următoarele două metode (șterge și Editați | ×) este un alt exemplu al aceluiași principiu. Deoarece niciunul dintre apelurile indexateDB nu este nou, nu ne vom deranja sa mergem peste ele. Cea mai mare parte a "cărnii" se termină prin manipularea DOM simplu pentru a face față acțiunilor particulare. Handlerul pentru a da clic pe butonul de adăugare este exact așa că vom trece și peste asta.
Salvați Funcţie $ ("# saveNoteButton") pe ("click", funcția () var title = $ ("# title"). = ("cheie"); val (); var t = db.transaction (["notă"]; "readwrite"); adăugați (title: title, body: corp, actualizat: new Date ()); altceva t.objectStore ("note" id: număr (cheie)); t.oncomplete = funcție (eveniment) $ ("# cheie") val (" #body ") val (" "); displayNotes (); $ noteForm.hide ();; return false;); ); Următorul pas interesant este Salvați metodă. Trebuie să folosim un pic de logică pentru a determina dacă adăugăm sau actualizăm, dar chiar și acest lucru este destul de simplu. Si asta e! O aplicație completă, dacă este simplă, IndexedDB. Puteți juca singur cu demo-ul prin descărcarea codului sursă atașat.
Asta e pentru partea a doua! Cel de-al treilea articol va prelua această aplicație și va începe să adauge caracteristici suplimentare, inclusiv proprietăți bazate pe căutare și array.
