Join Bill Weinman for an in-depth discussion in this video Editing data in an IndexedDB database, part of HTML5: Local Storage and Offline Applications.
Now we have a working web application that stores data locally on the client machine using IndexedDB. In this movie, we'll implement an edit function so that we can change the data that we've already entered. Over here in my text editor I've got 05-working.html. This is a working copy of 05-start.html which is our work so far in this chapter. I also have 05-copy.text and this is the code that we'll be copying and pasting so we don't have to type it all.
So the first thing we're going to want to do is put in our Edit and Delete buttons. Now the Edit button we'll be implementing in this movie and the Delete button we will be implementing in another movie. So those will go right here in our display table. So over here, in our display results, you see we have this little placeholder and that's where we're going to put the row buttons. So I'm just going to type the name of the function here. rowButtons and it gets v.id and v.traveler.
So that's data coming from the objectStore and this is the first time we've used v.id. Remember this is the key for the key- value storage and when we defined the database up here, we set the key path as ID and the autoIncrement to true. So that's automatically getting set. We're not actually setting that any place. That's why we haven't seen that before. So now we're going to go ahead and put in the rowButtons function and that's just right here. And I'm going to put that in right above this display results function and all this does, it's just a shorthand.
We could've just put this in line, but it's a little bit easier to do it this way and I think it's a little more clear to look at. It's a function that takes ID and traveler and it just returns a string with those components put into the string. So there is a form button and its values Edit so that'll display on the button and its onClick is editGo and it passes the ID and it gets that ID from right here. And that's the v.id that gets passed in down here in the display results function.
Now we need to implement this editGo function and we're going to stick that down here under dbGo, copy and paste that, and what this does, when you press that Edit button you want it to feel the form with the data from the database. So it goes out and it grabs that record from the database and it fills the form. So it grabs the data, all in this string of object method calls, and so you have the transaction object that gives you the objectStore object that gives you the get method and its onsuccess gets set to this event handler.
And so onsuccess of getting that data then you go ahead and you grab. There is that event target result pattern again and that gives us the record and in this case the record.traveler is getting set to the travel form element for traveler, destination to destination, and etcetera, etcetera. We're setting the goButton to update. So instead of saying Add it's going to say Update and the inputAction will be update and we're also setting the key-value to the ID from our record from the database.
We set the focus and select the result in the traveler field. So that's all very straightforward. I'm going to press Save and then we need to do one more thing. So when we press that Update button-- it used to be the Add button, now it's going to be the Update button-- we're still going to get this dbGo function. And so we want to be able to handle both types of events. Right now, it's just handling adding the records to the database, but we want it to also be able to handle updating record in the database. So instead of this code here, we're going to cut and paste and something else and that's this switch statement right here.
So let me just grab this and paste it in and then we'll talk about it. Now I'll go in indent it the way it's supposed to be indented. And so what a switch statement does is it takes a particular variable and it executes different code depending on the value of that variable. So in this case it's the action value which comes from that hidden form element and you remember down here in the editGo we're changing that inputAction to say update. So when it says update, it will execute this code instead of this code.
This is the code we had in there before and here's the DB transaction objectStore add and here we're doing something different. Now there supposed to be a method called Put that works on a objectStore that will update a particular object in the objectStore and I found that that didn't work reliably. So what we're doing instead is we're actually deleting the object and then adding the new object. It deletes the old one and adds the new one and I'm finding that this just works fine and in fact, that may be exactly what Put is supposed to do, because it makes a lot more sense rather than trying to rewrite a variable record inside of an objectStore.
So just like in the Add code, we're creating our current record and then we get our objectStore. So transaction objectStore gives us our objectStore and then on the objectStore, we're calling delete by the key and we have our onsuccess function and in our onsuccess event handler, we're calling add on the same objectStore. So in this case, we're breaking out this intermediate variable for the objectStore. We didn't need to do that in the last one because we're only using it for one thing. Here we're actually using it for two things.
We're using it for both the delete and the add. So this ought to be working at this point. I'm going to go ahead and save and we'll come over here and will press Reload in the browser and there is our four rows from our last example. And if I just click on this one that says Charlie here, you'll notice that it brings it up just as we expect it to and it changes this button from Add to Update. And I'm just going to type in Charlie with a capital C and I'm going to click on the Update button and you see that that changes it here in our display.
Now because our display just reads the entire database each time, it just looks fine and it works exactly as you would expect it to work. And if I want to edit another one and change say London to Paris, because of course you can get to Paris by boat, and that works exactly as we expected as well. So now our application can edit the data in the database. So all that's left is the ability to delete the data and that will complete the four basic functions of the database application: create, read, update, and delete sometimes called crud.
So in the next movie, we'll implement our delete functions.
- Understanding storage components of the HTML5 architecture
- Providing client-side storage
- Understanding the Storage() interface
- Keeping context with sessionStorage
- Understanding the Web SQL and Indexed Database APIs
- Creating a local storage database
- Reading, writing, editing, and deleting storage data
- Handling storage events with local storage
- Running applications offline