HTML5 Web Storage API (Part 5)

In this post, I just want to clarify why we need to change up some things in our web app and tell you why we need to do so... We might just change a few things, but by the next tutorial I promise, we'll finish our application and it'll truly be useful...

Why is our program not worth it?

Well, to be quite honest, our program is nothing more than useless. Well, I mean, what is the point of having a Web Storage API call when you're simple changing the text in a box? You can just change the inner HTML of the other box when the person fills out the form right?

So, isn't the API itself useless? Why don't we just use variables?

Now, each time your web page is refreshed or the person navigates to some other site, all your variables are destroyed. Now, if you've shopped on Amazon before, you'd have noticed that your cart contains your items even if you navigate to some other website (probably to compare prices).

Well, if your variables destroy when the people navigate then how do you think these websites store your information throughout your browser session. The answer is simple, they use the Web Storage API,

So, what can we do to make our app useful?

Well, our app currently displays the item that we entered through our form in the box to the right, right? So, what I'm planning to do now, is change the program such that it displays the list of all the items that you've entered using the form before even if you navigate between pages...

Well, to do this, we're going to make a lot of changes to our disp() function. You can safely go ahead and remove everything that is there in the disp function because in the next tutorial we'll be rebuilding the disp function...

Also, the disp function no longer takes in a parameter called 'key', in fact it takes no parameters. So, make the changes to your disp function declaration and your save functions accordingly...

Also, we'll be calling this function each time our page loads so, we will add the disp function at the end of the init function too...

So, here's what your JavaScript file should look like if you've been following my tutorials:

function init(){
    var button = document.getElementById("submit");
    button.addEventListener("click", save); 

    disp();
}

function save () { 
    var key = document.getElementById ("box1").value; 
    var value = document.getElementById ("box2").value; 

    sessionStorage.setItem (key, value); 
    disp();

    // We'll also clear the boxes
    document.getElementById ("box1").value = ""; 
    document.getElementById ("box2").value = ""; 
}

function disp(){
    // We'll build this function in the next tutorial...
}

window.addEventListener("load", init);

Messing around with the disp function

So, in this tutorial, we've basically reiterated over the main intent of our application. In the next post, we'll finally build our application by building our disp function and then testing our application...

So, I hope you're enjoying thus far and in the next tutorial, we'll be completing this series...