Welcome to the last lesson of our Html5 course.In our last lesson we tried to show you details about feature detection.in this lesson we’re going to test what we have learned and work with a common form to every 5 seconds save our comment.
Html5 Tutorial – Lesson 1 Html5 Tutorial – Lesson 6
Html5 Tutorial – Lesson 2 Html5 Tutorial – Lesson 7
Html5 Tutorial – Lesson 3 Html5 Tutorial – Lesson 8
Html5 Tutorial – Lesson 4 Html5 Tutorial – Lesson 9
Html5 Tutorial – Lesson 5 Html5 Tutorial – Lesson 10
Html5 Tutorial – Lesson 11
5.3:A persisting CommentForm
In this lesson are going to take the basic concepts of localstorage that we’ve learned and apply them to an actual project.So here you can see I have created a form and let’s quickly view that and while I’m thinking of it why don’t we take the submit button and put it on it’s own line.
So here I say inputtype=submit that should also display a block and then I’ll push it down.Take a look at our form we have a simple label we have a text area and a submit button.This is all very simple and very common.So let’s figure out our game plan.We just put this on the same page to keep it simple.Now the game plan is I say a few steps here the first is I want to detect support and then while the user writing in the text area every 5 seconds I want to save it.And then finally when the page subsequently load,if there is local storage available I want to set the default value of that text area equale to its value.Let’s get started on this first step I need to detect whether the browser supports local storage.
Now I can simply do modernizr.localstorage now remember with modernizr we don’t do the capital s we keep that lower case.Next number 2,while the user writting into the text area every 5 seconds I want to save that value.So we need to do two things here we need to grab the text area from the dom and listen for when it’s focused because remember we don’t want to save the text to local storage when there not even on that comments anymore.We only want to do that while they were focused and typing in that text area.
And next it sounds like every five second we need to set an interval so that we can save that.If modernizr.localstorage and I’ll paste this comment within here.Right of the top we say var comment and we’ll say document.getelementbyid and in this case for looking for the text area within an id of comment.So we’ll bring that in right there and then finally because we are going to be working with JavaScript set Interval we want to be able to clear that so we need to sort in a variable all the clear that up here update interval .
Now we need to listen for when the text area is focused so we’ll say get the comment ID and add an event listener.And we’re going to listen for when they focus on it and when they do will execute this function here and all I want to do is say updateInterval and we are going to run JavaScript set Interval function and this will accept an action what are we going to do.And then the second perimeter is how long do we wait between h1 and we’ll set a 25 seconds which declared in milliseconds would be B 5000.So that means in 5 seconds I want you to execute the code within here.
Then wait 5 seconds again and executed again it’s a timer every 5 seconds it will do something.And in this case we want to save local storage and I’m going to give it comment and and I’m going to make that equal to the value that’s in the text area.Now we know we access the text area via this comment variable. We can also access the text for the value of the text area by doing .value So now let’s try this out I’m going to console log focused in this will see if this function runs when we focus on the input.We will open up Chrome developer tools browse to the console and now I will reload the page and click on it and sure enough we are being focused and that’s running fine.
Let’s see if local storage is being said so once again reload and this time I’m going to go to resources and local files and we will get rid of that comment and now going to the beginning of my comment and if we did everything correctly every 5 second round value of this text area should be saved.So l leave and come back and there it is now I will add more I’m going to work on a long comment in every 5 seconds if we come back that is being saved.So now a couple of things,though we are listening for when the user focuses but we never listen for when they leave.
So for example we’ve set and interval here but we haven’t cleared it so it’s going to run indefinitely.We relode page here’s my console I’m gonna type something and if we wait 5 seconds will see it shows in console log but even if I click off I’m done I’m going to read the rest of the article or do something else you’ll see representing metal coat number 3 and its continuing to run in saving anf that’s the exact same value what we save to local storage every single time.So that means we need to add another listener for when the user blurs and blur means when the user focuses away tabs off or clicks off and will do that like so
Once again if you’re a JQuery user we will modify this with JQuery at the end of the lesson.Now when they blur off of it Let’s clear interval and clear in a full needs to know a reference which interval are we referring to we call that updateinterval.The next step is when the page subsequently loads to text storage and apply the value to the text area and because taking kind of a protectionist approach place this right up here.When page subsequent loads detect a storage if localstorage.comment Then if you found it apply the value to the text area like so
The basic ideas the same this side will only execute if that side is true.Let’s try it out i am goinng to resources and I want to start from scratch.So I will clear that.Now I am gonna relode the page here is my comments and if we do everything right again every 5 seconds that’s going to be saved.But that’s not working let’s view the console and we had an unexpected token false.and it looks like I left off a comma right there.Okay let’s relod the page and now it has detected that I type the text area the last time and it’s saved.So here is my comment just a few seconds or so and we go back to Resources local file that’s been saved.
So now let’s say oh no the page died on me I need to reload it I bring it back up and there it is so I will type some more and more and then I’ll wait a few seconds type some more and the only way that the text I type will not saved will be if I close it before the next interval occur which means worst case scenario I lose 5 seconds of typing but now thats been saved if I reload the page right here we detect has there been anything saved if so that the value of the text area equal to what we saved in local storage reload page and that’s been saved.
Now we switch this over to jQuery if you prefer that otherwise go ahead and move on to the next lesson but if you prefer Jquery that’s cool.This case we will stay right here rather than add event listener I’m going to remove this and say JQuery get the element with an idea of comments and we’re going to listen for when they focus and then we will execute this function.We don’t need the third bubble permeate and then we are also going to add this blur event listener.
So I will get rid of all of that as well.So this is a little difficult to read maybe I’ll put this on it’s own line.I also get rid of the false bubble statement and because we are referencing the JQuery object version of the element with an id of comment.We can remove that entirely.I am just make that var update interval and then lastly update interval local storage.comment and we can access that variable and JQuery if I doing jQuery this.var However one thing here is this no longer refers to what you might think it does after right here we listen for when the user focuses on the comment ID this is going to refer that comment ID that was focused.However then we run the set interval function.
Now within here this is not going to refer to comment anymore if refers to the DOM window and that’s really not helpful.So at this point we are wraping the window object in jQuery and trained access the value attributed.That’s not gonna work at all.So why don’t we create a new variable and you probably seen this before far is that equals this or surely coming in the JQuery world for var jQuery.And lastly we will update this value to be a Jquery.So we can refer to the comment rather than the window.
I’m going to make sure that I wrap this within the Jquery object.So Let’s view this in the browser I am reloading the page and clear the local storage let’s try it out here is my comment give it just a few seconds to save and click off reload the page and it still there.
That’s really not a big deal.If you prefer you can increase that every 2 or 3 seconds but I think 5 is enough.Okay that’s we do it for this lesson I hope this is appealing to you my favorite thing is set local storage API is incredibly simple.We’re dealing with just a couple methods in a couple ways to assign key value pairs.
So that’s the end of our Html5 tutorial course..Hope it helps you for your project.
The post Html5 Tutorial – Lesson 12 appeared first on DevsTrend.
