HTML5 Web Storage API (Part 1)

Hey everyone! In this little tutorial series, we'll be learning to store data in key value pairs in our user's computers with HTML5's Web Storage API.
Now, why would we use the Web Storage API instead of cookies? Well, one simple reason is that the cookies are sent to the server and your server has to do all the magic. Web Storage is for offline applications and apps that run solely on the client without a major role-playing back end...

Introduction to the project

In this project we'll be creating a simple website that allows us to enter data (keys and values) in a form and then we store the data and retrieve it. Not really a useful application but at least we learn the basics from it which will allow us to build cooler stuff.

Building the interface

So, let's build an interface for our cool little application. Here's the blueprint:

• We'll have two sections:
• A left box containing our form containing:
• A text box to enter the key
• A text box to enter the value
• A button to save the data
• A right box to display our data

So in our code:

<section id="left">
    <form>
        <p><input id="box1" placeholder="Enter the key here"></p>
        <p><input id="box2" placeholder="Enter the val here"></p>
        <p><input id="submit" type="button" value="Submit"></p>
    </form>
</section>
<section id="right">
    You'll see some keys and values here if you add them!
</section>

Understanding our code

So, the first things you see are two sections with the ids left and right. They are the two sections we'll be working with.

The first section has two text boxes allowing us to input keys and values, and a button allowing us to save the information.

The text in the right section will be updated by JavaScript (in future tutorials) to show all the items in our cache...

Conclusion

So, as of now our project is really simple, nothing much that you didn't know. In the next tutorial, we'll style our web page and make it look better. And then in the upcoming tutorials, we'll actually build the functionality.