This is the 11th lesson of the Html 5 Tutorial.Here we’ll discuss about Local Storage and Feature Detection.So let’ start..
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:Local storage
5.1:Introduction to local storage
Think about it how many times have you found yourself writing a long comment on some blog posting when suddenly your internet connection fumbles and once you reload the page your entire comment is gone and then when you rewrite the comment you usually haven’t the size as before.Wouldn’t it be cool if there was a way to save your state.
So Let;s say when you’re leaving a comment every 5 seconds your comment is saved.Then it’s something does happen when you subsequently reload the page your comment will still be there.And this can be used in such a huge variety of applications.And now with html5 we can do this via local storage.
So what exactly is local storage and it is essentially allows us to assign key value pairs and store them for future use.And that’s really the extent of it.So you might be thinking isn’t this the exact same thing as cookies and although the basic ideas the same,no they’re not the same.Here is a few differences cookies are pushed to the server for every single request.So I asked you can imagine for larger data sets this could be set some potential performance issues.
Our next cookies have a limit so they can’t exceed around 4 kilobytes.Local storage does not have that issue.And Lesley cookies will have a built-in expiration date and local storage can exist in definitely.So if this term is still confusing to you just think of it this way.Local storage can give you the ability to close and reopen a browser and still see the data that you type before you close that.And this is so simple.Now for browser supports we going to be pretty solid here IE8 and up supports it and all other modern browsers.So other than IE7 and IE6 the nice thing is that local storage can degrade gracefully if you do it correctly and you don’t depend on that data.
Now the last thing before we get in for project is technically local storage is not part of html5.However we group it together because it helps to represent the modern technologies that we can work with.But if you want to get technical about it local storage is within its own speck called webstorage.So let’s dig in here I’m going to create a script tag and we can use local storage in a few ways.First we’ll do the form localstorage and we’re going to set item this will accept two perameters the key how are we going to refer to this value and then of course the value.So we would say the keys name in the value is going to be my name.
So if the browser support it notice that I’m not doing any feature detection which are should be.But for now when I load the browser it is going to save some information to local storage.Let’s try it out try and open up Chrome and reload the page and now we can take a look at what’s in the local storage by opening up chrome developer tools.I’m going to go to resources and right here can you see local store will click on that local files and here we are we have saved key of the name in the value is Geoffrey Way.
So if you want to grab this value why don’t we just put it right up here just for the demo.I’ll say if( localStorage.) and now I want to grab that value so I can say get item now what item do want I need to refer to it by the key.So if you are able to find that value in that case let’s displayed on the page and here quickly will just do document.query selector{‘h2’}.innerhtml=localStorage. getitem(name):
Reload the page and there’s are value.And again what’s cool about this is it persists.So if I reload the page that’s always going to be there.Now a couple things I want you to note if I close this tab and opening in another it’s still going to work as you can see right there.However it is specific to the browser. So if I open this and Firefox we’re not going to get anything at all and that’s because local storage is attached to the browser.So you might be thinking well what exactly are the application for this and there are huge.
For example right now I am building a quiz attention wouldn’t it be nice if you don’t get client side where let’s say to get up to question number 5 and then they accidentally closed the tab or the internet cuts out.With local storage they bring up that page we can detect what question they are currently on and then display that immediately that way they don’t have to start all the way over.You can also imagine it for a form let’s say you’re filling out a big form to buy some item on Amazon.And once again you lose your internet connection well with local storage you could save the value of all of the form.And then when you reload the page you can assign those saves values back to the form elements.
So you don’t have to do it again.Now if we come back we’ve learned how to set an alarm,we’ve learned how to retrieve the value by doing localStorage.get items.The last thing we need to take a look at is how to clear local storage.When I come back and I want you to remember we have saved local storage, we can clear everything within it by doing localStorage.clear we’re going to call the clear method.Now if I come back and return here you can see that that has been deleted.
All right so believe it or not that is the basic concept behind the local storage.In the next lesson I’m going to show you some other ways to reference these values and will also take a look at feature detection.
5.2:Feature detection
Here we’re going to take a look at the various ways that we can assign items and remove and then will also take a look at how you could perform feature detection.In the last lesson we learn that we could do localStorage.setItem(‘key’,’value’);Now what’s nice is though we can also apply this file doing local storage and immediately setting the key.So if we wanted to set a named key we would do local storage.name=your name.Now we will be identical to what we did up here.Now we can also do it like this local storage as for dealing with an object once again we can reference it like so.
Now this method is preferred if maybe the key store within a variable you can do local storage then the variable name and that’s one way to do it.Now the same thing is true for get item.Here wer’e retrieved the value of the name key we can localstorage.name and if we assign that to a value that will then be equal to it Next for deleting you can do local storage.remove item.And this will be the same thing as doing the way you wouldn’t normally delete a property from an object delete localstorage.name.Now in the previous lesson I also talked about clearing the local storage.This is a little bit different in that it will clear all of the keys.So in this case you only delete the name key from local storage you would use one of these method.
However if you wanted to do a clean swipe and get rid of all local storage for that web page you would to localstorage.clear.Now on to feature detection we cannot depend on this because some older browsers like IE 7 will throwing error if we try to use local storage.So we need to implement some feature detection and luckily this isn’t too hard.So first we’ll take a look at the menu around and then we will use modernizr.The common way that we can detect support for local storage is maybe we’ll create a variable called supports storage and we’ll make it equall function.
Here we have to run it through a try catch block and that’s because there could be erroe throne.So we want to make sure if there is an error throne that we don’t display on the page we simply return false.Because remember we want this variable to be a bullian that way we can use it by saying if the browser supports storage then do something with it.
So within herer try we are going to try to return and see test local storage exists within the window object and it should because normally we access local storage like this but it’s the same thing it’s a child of the window object.So it’s the same thing as if we did window.localstorage and now we’re simply saying the way you would test may be for a property on an object did you see local storage in the window and we also have to do this extra tests show the 100 percent certain we’re going to try to access local storage this way as well.If that is not equal no we return through.
So we do two test here,does look a storage exist in the window object and can we access it is it equall to no if neither of those are false we’re going to return true.Now if there is some kind of error for dealing with Internet Explorer it will be cut with in this catch block in that case we don’t want to do anything with it we are going to return false.That way no matter what supports storage return true or false then we can say if support storage we just do an alarm.If I come back and relode the page,we know this browser supports its so we get an alert.But if you view this in IE7 you won’t get anything at all.Now if you’re just using local storage in your project this is fine save it with a variable and be done with it.However after using a lot of the new html5 and css3 features definitely use modernizr and in this case we would get rid of all of this because modernizr has already performed to test.
Let’s see what they’re doing.View the source and I’m going to look for local storage here and which nice about the sources is it’ll provide some education here.So if you were wondering why did we had to see if trying to know we can see right here normally we could do it like this.
But otherwise Firefox for throw whatever this area seems to be.So let’s see the tests performing local storage and he’s going to return localstorage.get item that could be bullian,they are doing it slightly different here.Probably a little bit more thorough and if there is an error they return false and he does the same thing for session storage which has an API that’s almost identical tolocal storageThe only difference is that second session storage is limited to the lifetime of the window rather than local storage which will persist across page load.So now we have a basic concept of how modernisers implementing it.If modernize.Localstorage and I want you to know note that we’re used in a lower case s.Normally you access local storage by doing local capital s but with modernize it is fairly common it will be all lowercase.
So let’s try this now come back reload the page and we get the same alert but we didn’t have to write the feature test ourselves Modernizr does it for us. That’s what’s really nice we can just focus on codding and let moderniser do its thing.So the next lesson we’re going to test what we have learned and work with a common form to every 5 seconds save our comment.We will do that in the next lesson
The post Html5 Tutorial – Lesson 11 appeared first on DevsTrend.