Video: Saving edits

Our content is editable, and now it's time to bring in a little extra functionality to make the app a bit more user-friendly. We want our users to be able to save their edits, if they so desire, so that they can continue making changes at a later date. We also want to give our users the ability to remove all list items. For both these goals we turn to the HTML5 technology known as localStorage. Let's start by setting up our triggers. Two links which will place right below the list items as you see here.

The HTML5 Projects series combines HTML5, CSS3, and recent JavaScript API technologies to enhance your web projects with interactivity and multimedia. This installment shows how to create a basic to-do list widget with an editable field so users can enter their tasks and delete them as they are completed, and a more advanced version with all the bells and whistles, including a drag-and-drop interface that allows for quick and easy sorting. Author Joseph Lowery covers HTML5 technologies such as web databases, content editing in the browser, and CSS transitions and transforms.

Saving edits

Our content is editable, and now it's time to bring in a little extra functionality to make the app a bit more user-friendly. We want our users to be able to save their edits, if they so desire, so that they can continue making changes at a later date. We also want to give our users the ability to remove all list items. For both these goals we turn to the HTML5 technology known as localStorage. Let's start by setting up our triggers. Two links which will place right below the list items as you see here.

So we're going to place this as I said right after the closing ul tag here, and we'll put it in its own paragraph. Let's put in the first link. So because we're just going to be using the link as a trigger of sorts, we'll set the href=javascript.void(), put that semicolon there, and we want to be sure to give this link an ID, and this ID will be saveAll. And within the link, we'll put the keywords Save All.

And this is a custom script tag. We'll set the type="text/javascript" close that and make a couple of lines for our code. Now we'll put in the jQuery document-ready function starting with $(document).ready(function() {}); and we'll make a little space and put in the and then hit Return to move that all the way down.

Now before I forget, I'm going to go ahead and put a semicolon at the end of that function call. Next we want to declare a variable which I'm going to call theList, = document.getElementById; and the ElementById that we're getting is for the unordered list which has an ID of the list. Semicolon at the end, now we're ready to code the first of two click functions.

This one will target the saveAll link. So we'll put in our $('#saveAll').click(function(e){}); and then Return, and again we'll put in our semicolon.

But the first thing we want to do here is to type e.preventDefault(); and that will stop the browser from expecting the link to be an actual link, and not a trigger as we're using it here. Again a semicolon at the end. And now we'll bring in localStorage. If they click the saveAll link, we want to use localStorage to set item and that item will call todoList. And what are we going to put in todoList? Well we're going to put in theList, that's the unordered list, innerHTML.

So that will be all of the tags that are contained within the unordered list. Okay, semicolon there. Because this next function is pretty similar, I'm just going to copy what we just did and then paste that in. Now instead of being triggered by saveAll, this is going to be triggered by the link with an id of clearAll. We'll keep the click(function) and e.preventDefault, but now we don't want to set an item, in fact, we want to clear all the items. And a function for that is just clear.

Now there is one last bit of code that needs to go in here. Once you've cleared the items, in order for that change to be reflected on the page, we'll have to reload the page. And the way to do that is to type location. reload(); and those functions are done. We're not quite finished, now we have to bring in the localStorage items when the page loads which will do by putting on its own line, the function called loadToDo, which is a call to a custom function.

We're just about to create. So function loadToDo(){}. Now we only want to attempt to load in these entries, if they exist. If we do it and there are no entries there, it's very possible that an error could be thrown. So let's check by using an if statement; if (localStorage.getItem('todoList'){}). If that item exists then let's set theList. innerHTML = localStorage.getItem.

So I am just going to highlight that, copy it, paste it in, and close it out with a semicolon.As I scanned over my code before I save the page, I realize that I've left off a parenthesis here, so I'm going to go ahead and bring that in. It's always a good idea to check your code one last time for those missing elements, and that also indicates that I've got an error there, and that was that parenthesis I got moved down, but otherwise I think this looks pretty good. So let's save the page and head over to the browser. I'll click Refresh.

Let's scroll down a bit and let's enter in a couple of items here. I thought maybe I would enter in a few movies that I've been wanting to see again. Of course Jaws is at the top of that list, and then perhaps Watchmen, Big, I always like, and then the animated feature 9. Let's save all and then I'm going to copy this link. Open up a new browser window and paste it in.

And there are our list items, good to go. But let's say I've watched all my flicks and now I'm ready to move on. I'll clear the list, and we're back to the default entry. Perfect! Our basic to-do list is up and running.

There are currently no FAQs about HTML5 Projects: Advanced To-Do List.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.