Create a User Note-Keeping Utility For Your Site With IndexedDB: Part 4

In this series we have been building the elements of a user note-keeping utility for Web pages, using the IndexedDB API. So far we have built the database, created an object store to save the user’s notes and handled adding and deleting notes. In this last part of the series we will bring these elements together by querying the note database, presenting the user notes within the page markup so that they can see them on returning to the page. This is the final part in a series of four tutorials:

Fetch the Stored Notes

As you may remember from the previous parts in this series, our JavaScript code calls a function named “getNotes” in various places: when a note is added or deleted and when the page is initially presented. This function is going to handle querying the object store for notes already saved, then building this data into HTML elements to include in the page markup. Add the function outline in the script section of your page head, before the line in which the “init” function is called, which should be the final line in the script:

/*
Function checks if there are existing notes and if so presents them within the page
- function is called after database initialization and when notes are added/ deleted
*/
function getNotes() {
}

Inside the function, start by retrieving a reference to the database object store:

Now get a reference to the page element in which our notes are going to appear:

//get the page element in which the note elements will appear
var noteContainer = document.getElementById("notes");

Remember that we added this element in the first part of the series. Each time this function is called it is going to clear any currently displayed notes and start from scratch, so that it can go through the same process if a note has been added or deleted. Start the content at empty:

//set to empty at first - in case a note has been deleted
noteContainer.innerHTML="";

Traverse the Notes

With IndexedDB, rather than using SQL queries, we traverse the data items using a cursor. Still inside the function, add the following section to open the cursor:

The remainder of the JavaScript function will be placed inside this block. If the cursor opening process is successful, the code inside this will execute. Attempt to retrieve the result of opening the cursor:

The content of this “if” statement is going to execute once for each item encountered by the cursor, i.e. each note saved.

Build Each Note

For each note, we need to build an HTML element, which is in turn going to contain child elements. The entire note will be displayed as a div, so start inside the conditional statement by creating this element:

Pay particular attention to the line in which the click event listener is added to the button. The “deleteNote” function we created last time is called here, passing the key for this note as retrieved from the cursor. Now add the button to its containing element:

inputPara.appendChild(deleteButton);

Now we can append the date, note text and delete button sections to the parent note element:

That’s the process for the current note complete, but we want the cursor to keep traversing the object store until it finishes the notes:

//carry on to the next note if there is one
cursor.continue();

This should be the last line inside the “if” statement, which will execute once for each note data item the cursor encounters in the object store. That’s the JavaScript complete, so take a moment to look over it.

Style the Notes

The only remaining step is to make the note sections look like notes. In the style section in your page head, add styling for the note elements:

We use a CSS3 gradient to give each note the appearance of a “post-it” note. Finally, add a style section for the delete button area in each note:

/*delete button*/
.deletePara {
text-align:right;
padding-top:10px;
}

Conclusion

That’s our note-keeping facility complete so you can save your page, upload it to a server and browse to it in order to test it. Remember that these functions will currently only function correctly in recent versions of Firefox and Chrome. Test your page by adding and deleting notes, browsing away from the page and back to see that the notes persist. If you want to explore using IndexedDB further, one area to consider looking into is using the indices we created for searching functions. Although it is still early days, you can see how APIs like IndexedDB fit into the improved local storage model we can look forward to with HTML5.

Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing.
More articles by Sue Smith

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.