Share
Velkommen til den andre delen av IndexedDB-artikkelen min. Jeg sterk anbefaler å lese den første artikkelen i denne serien, da jeg antar at du er kjent med alle begrepene som er dekket så langt. I denne artikkelen skal vi pakke opp de CRUD-aspektene vi ikke klarte før (spesifikt oppdatering og sletting av innhold), og deretter demonstrere en ekte verdensapplikasjon som vi skal bruke for å demonstrere andre begreper i den endelige artikkelen.
La oss starte med å diskutere hvordan du oppdaterer en plate med IndexedDB. Hvis du husker det, var det ganske enkelt å legge til data:
// Definer en person var person = navn: navn, e-post: email, opprettet: ny dato () // Utfør add var request = store.add (person);
Oppdatering av en plate er like enkel. Forutsatt at du har definert en eiendom som kalles id Som nøkkel til objektbutikken din, kan du bare bruke sette metode istedenfor Legg til.
var person = navn: navn, e-post: email, opprettet: ny dato (), id: someId // Utfør oppdateringen var request = store.put (person);
Som Legg til Metode, du kan tildele metoder for å håndtere de asynkrone resultatene av operasjonen.
Sletting av poster gjøres via slettemetoden. (Stor overraskelse der.) Du sender bare inn den unike identifikatoren til posten du vil fjerne. Her er et enkelt eksempel:
Accentsconagua
var t = db.transaction (["people"], "readwrite"); var request = t.objectStore ("folk"). slette (thisId); Og som alle andre aspekter av IndexedDB, kan du legge håndtakene dine til de asynkrone resultatene.
Så, som sagt, ikke veldig spennende, noe som trolig er bra. Du vil ha API-ene dine enkle, kjedelige og overraskende. La oss nå ta det vi har lært og ta det sammen for å skape en ekte, om enkel applikasjon.
Ok, til slutt har vi alt (vel, mest) av delene vi trenger for å bygge en ekte applikasjon. Siden det ikke har blitt gjort før (ahem), vi skal bygge en enkel notat å ta søknad. La oss se på noen skjermbilder, og så viser jeg koden bak den. Ved start, initierer applikasjonen en IndexedDB for applikasjonen og gjør et tomt bord. I utgangspunktet er alt du kan gjøre med applikasjonen, legg til et nytt notat. (Vi kan gjøre dette litt mer brukervennlig kanskje.)
Klikk på Legge til notat knappen åpner et skjema:
Etter at du har lagt inn noen data i skjemaet, kan du deretter lagre notatet:
Som du kan se, har du muligheten til å redigere og slette notater. Til slutt, hvis du klikker på rad selv, kan du lese notatet:
Så ikke akkurat rakettvitenskap, men et fullt fungerende eksempel på IndexedDB-spesifikasjonen. Notatene skrevet her vil fortsette. Du kan lukke nettleseren, starte maskinen på nytt, ta noen år til å tenke på liv og poesi, og når du åpner nettleseren igjen, vil dataene dine fortsatt være der. La oss se koden nå.
Først - en ansvarsfraskrivelse. Denne applikasjonen ville ha vært en perfekt kandidat for en av de mange JavaScript-rammer. Jeg er sikker på at de som bruker Backbone eller Angular, allerede kan forestille seg hvordan du vil sette opp dette. Men - jeg gjorde den dristige beslutningen her til ikke bruk et rammeverk. Jeg var bekymret for både folkene som kan bruke et annet rammeverk og de som ikke bruker noen. Jeg ville ha fokus her for å være på IndeksDB-aspektene alene. Jeg forventer fullt ut at noen mennesker er uenige med den beslutningen, men la oss ha det i kommentarene.
Vår første mal er HTML-filen. Vi har bare fått en og mesteparten av det er boilerplate Bootstrap:
Notatdatabase NotatdatabaseRediger notat
Som nevnt ovenfor er en god størrelse del av denne filen malkode for Bootstrap. Delene vi bryr oss om er noteList div, the noteDetail div, og noteForm. Du kan sikkert gjette at disse er DIVene vi vil oppdatere når brukeren klikker rundt i programmet.
La oss ta en titt på app.js, Kjernefilen som håndterer logikken for søknaden vår.
/ * global konsoll, $, dokument, vindu, varsling * / var db; funksjon dtFormat (inngang) hvis (! input) returnerer ""; var res = (input.getMonth () + 1) + "/" + input.getDate () + "/" + input.getFullYear () + ""; var time = input.getHours (); var ampm = "AM"; hvis (time === 12) ampm = "PM"; hvis (time> 12) time- = 12; ampm = "PM"; var minutt = input.getMinutes () + 1; if (minutt < 10) minute = "0" + minute; res += hour + ":" + minute + " " + ampm; return res;
Du kan ignorere den første funksjonen, da det bare er et formatverktøy for datoer. La oss hoppe videre til jQuery-dokumentsklarblokken.
$ (dokument) .ready (funksjon () hvis (! ("indexedDB" i vinduet)) alert ("IndexedDB-støtte kreves for denne demoen!"); return; var $ noteDetail = $ ("# noteDetail") ; var $ noteForm = $ ("# noteForm"); var openRequest = window.indexedDB.open ("netuts_notes_1", 1); openRequest.onerror = funksjon (e) console.log ("Feilåpning db"); konsoll .dir (e);; openRequest.onupgradeneeded = funksjon (e) var thisDb = e.target.result; var objectStore; // Opprett Not OS hvis (! thisDb.objectStoreNames.contains ("note")) konsoll .log ("Jeg må lage notatobjektet"); objectStore = thisDb.createObjectStore ("notat", keyPath: "id", autoIncrement: true);; openRequest.onsuccess = funksjon (e) db = e.target.result; db.onerror = funksjon (hendelse) // Generisk feilhåndterer for alle feilene som er målrettet mot denne databasens // requests! alert ("Database error:" + event.target.errorCode); console.dir (event.target);; displayNotes ();; Vår aller første handling er å se etter IndexedDB-støtte. Hvis brukerens nettleser ikke er kompatibel, bruker vi et varsel og avbryter funksjonen. Det ville nok være bedre å flytte dem til en side som fullt ut forklarer hvorfor de ikke kan bruke programmet. (Og for å være klar, kan vi også bygge et program som benyttet WebSQL som backup. Men igjen - mitt fokus er her på enkelhet.)
Etter å ha cached noen jQuery selectors, som vi bruker hele appen, åpner vi vår IndexedDB database. Databasen er ganske enkel. I onupgradeneeded Handler du kan se en objektbutikk som heter notater blir opprettet. Når alt er gjort, vil onsuccess Handler vil brann av en samtale til displayNotes.
displayNotes Funksjonfunksjon displayNotes () var transaksjon = db.transaction (["notat"], "readonly"); var content = "
| Tittel | oppdatert | |
|---|---|---|
| "+ Cursor.value.title +" | "; innhold + =""+ DtFormat (cursor.value.updated) +" | "; innhold + ="Rediger Slett | "; innhold + ="
De displayNotes funksjon gjør det du forventer - få alle dataene og vise det. Vi diskuterte hvordan du får alle rader med data i forrige oppføring, men jeg vil påpeke noe litt annerledes om dette eksempelet. Legg merke til at vi har en ny arrangementshendler, onComplete, at vi har bundet til selve transaksjonen. Tidligere har vi brukt hendelser bare innenfor handlingene, innsiden Transaksjonen, men IndexedDB lar oss gjøre det på toppnivå også. Dette blir spesielt nyttig i et tilfelle som dette. Vi har en gigantisk streng, vårt HTML-tabell, som vi bygger opp over hver iterasjon av dataene våre. Vi kan bruke transaksjonen onComplete handler for å pakke opp skjermdelen og skrive den ut ved hjelp av en enkel jQuery-samtale.
Slett, Redigere, og Legg til funksjoner $ ("# notatliste") på ("klikk", "a.delete", funksjon (e) var thisId = $ (dette) .parent (). foreldre () .data ("nøkkel"); = db.transaction ("notat"], "readwrite"); var request = t.objectStore ("notat"). slett (thisId); t.oncomplete = funksjon (hendelse) displayNotes (); $ noteDetail.hide (); $ noteForm.hide ();; return false;); $ ("# notatliste") på ("klikk", "a.edit", funksjon (e) var thisId = $ (dette) .parent () .forelder () .data ("nøkkel"); = db.transaction ("notat"], "readwrite") .objectStore ("notat") .get (thisId); request.onsuccess = funksjon (hendelse) var note = request.result; $ ("# key" ) .val (note.id); $ ("# title") .val (note.title); $ ("# body") .val (note.body); $ noteDetail.hide (); $ noteForm.show ();; return false;); $ ("# noteList"). ("klikk", "td", funksjon () var thisId = $ (dette) .parent () .data ("nøkkel"); var transaction = db.transaction notat "); var objectStore = transaction.objectStore (" notat "); var request = objectStore.get (thisId); request.onsuccess = funksjon (hendelse) var note = request.result; $ noteDetail.html (""+ Note.title +"
"+ Note.body +"
"(), $ noteForm.hide ();;); $ (" # addNoteButton ") på (" klikk ", funksjon (e) $ (" # title "). ), $ ("# body") .val (""); $ ("# key") .val (""); $ noteDetail.hide (); $ noteForm.show ();); Våre to neste metoder (slette og redigere) er et annet eksempel på samme rektor. Siden ingen av IndexedDB-anropene her er nye, vil vi ikke bry deg om å gå over dem. Det meste av "kjøttet" her ender opp med å være enkel DOM-manipulering for å håndtere de aktuelle handlingene. Handler for å klikke på add-knappen er akkurat det, så vi hopper over det også.
Lagre Funksjon $ ("# saveNoteButton") på ("klikk", funksjon () var title = $ ("# title") .val (); var body = $ ("# body"). = $ ("# key") .val (); var t = db.transaction (["notat"], "readwrite"), hvis (nøkkel === "") t.objectStore ("notat"). legg til (title: title, body: body, updated: new Date (); else t.objectStore ("note") .put (title: title, body: body, updated: new Date id (tall)); t.oncomplete = funksjon (hendelse) $ ("# nøkkel") .val (""); $ ("# tittel"). #body ") .val (" "); displayNotes (); $ noteForm.hide ();; return false;); ); Neste interessante tidbit er lagre metode. Det må bruke litt logikk for å avgjøre om vi legger til eller oppdaterer, men selv det er ganske enkelt. Og det er det! En komplett, hvis enkel, IndexedDB-applikasjon. Du kan spille rundt med denne demoen selv ved å laste ned vedlagte kildekoden.
Det er det for del to! Den tredje artikkelen vil ta dette programmet og begynne å legge til flere funksjoner, inkludert søke- og arraybaserte egenskaper.
